# 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
のようなコンポーネントと組み合わせて、機能を追加することができます。