# Sliders

v-slider コンポーネントは数値入力の可視化を向上させます。 数値データを収集するために使用します。

# 使い方

バーに沿って値の範囲を反映し、そこから単一の値を選択できます。 音量、明るさ、画像フィルタの適用などの設定を調整するのに最適です。

# API

# サンプル

# Props

# Colors

スライダーの色は props colortrack-colorthumb-color で設定できます。

# Disabled

disabled(無効化)設定されたスライダーの操作はできません。

# 離散的な設定

離散的なスライダーでは、現在の正確な量を表示するサムラベル(thumb label)を提供します。 step propを使うと、ステップ以外の値を選択できないようになります。

# Icons

append-iconprepend-icon propsを使って、スライダーにアイコンを追加できます。 @click:append@click:prepend を使用すると、アイコンをクリックしたときにコールバック関数をトリガーできます。

# ラベルの反転

v-sliderinverse-label propを指定すると、スライダーの末尾にラベルが表示されます。

# 最小値と最大値

minmax の値を設定できます。

# Readonly

スライダーに readonly を設定すると、見た目は通常のままですが、入力などの操作はできません。

# Step

v-sliderは1以外のステップも持つことができます。 これは、値を調整する必要がある一部のアプリケーションで役立ちます。

# サムネイル

thumb-label propを使うと、スライドしている時あるいは常にサムラベルを表示できます。 thumb-color propでカスタムカラーを、thumb-size propでカスタムサイズを設定できます。 always-dirty propを使うと、minの値であっても色が変化しないようになります。

# Ticks(目盛り)

Tick マークは、ユーザーがスライダーを移動できる既定値を表します。

# バリデーション

Vuetify には rules プロパティを通じた簡単な検証が含まれています。 このプロパティは function, boolean, string の混合配列を受け付けます。 入力値が変更されると、配列の各要素が検証されます。 関数は現在の v-model を引数として渡し、 true / false または、エラーメッセージを含む string のいずれかを返す必要があります。

# 垂直スライダー

vertical propを使用して、スライダーを垂直方向に切り替えることができます。 スライダーの高さを変更する必要がある場合は、css を使用します。

# Slots

# append と prepend

appendprependといったスロットを使えば、あらゆる状況に合わせて簡単にv-sliderをカスタマイズすることができます。

# テキスト欄を追加

スライダーは、appendスロット内の他のコンポーネント、例えばv-text-fieldのようなコンポーネントと組み合わせて、機能を追加することができます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:07/05/2022, 9:08:15 PM