# Sliders
v-slider コンポーネントは数値入力の可視化を向上させます。 数値データを収集するために使用します。
# 使い方
バーに沿って値の範囲を反映し、そこから単一の値を選択できます。 音量、明るさ、画像フィルタの適用などの設定を調整するのに最適です。
# API
# サンプル
# Props
# Colors
スライダーの色は props color、 track-color 、 thumb-color で設定できます。
# Disabled
disabled(無効化)設定されたスライダーの操作はできません。
# 離散的な設定
離散的なスライダーでは、現在の正確な量を表示するサムラベル(thumb label)を提供します。 step propを使うと、ステップ以外の値を選択できないようになります。
# Icons
append-icon と prepend-icon propsを使って、スライダーにアイコンを追加できます。 @click:append と @click:prepend を使用すると、アイコンをクリックしたときにコールバック関数をトリガーできます。
# ラベルの反転
v-sliderにinverse-label propを指定すると、スライダーの末尾にラベルが表示されます。
# 最小値と最大値
min と max の値を設定できます。
# 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
appendやprependといったスロットを使えば、あらゆる状況に合わせて簡単にv-sliderをカスタマイズすることができます。
# テキスト欄を追加
スライダーは、appendスロット内の他のコンポーネント、例えばv-text-fieldのようなコンポーネントと組み合わせて、機能を追加することができます。