v-slider コンポーネントは数値の入力をうまく可視化できます。数値のユーザーデータに利用されます。
以下に、簡単な例から複雑な例まで示します。
スライダーには、min と max の値を設定できます。
スライダーに disabled を設定すると、インタラクションができなくなります。
スライダーに readonly を設定すると、見た目は通常のままですが、入力などのインタラクションができなくなります。
append-icon および prepend-icon props を使用することで、スライダーにアイコンを設定できます。@click:append および @click:prepend を使用すれば、アイコンをクリックしたときにコールバック関数をトリガさせることができます。
vertical を指定すると、スライダーの方向を垂直に切り替えることができます。スライダーの高さを調整する必要があるときは CSS を使用してください。
You can display a thumb-label while sliding or always. It can have a custom color by setting thumb-color and a custom size with thumb-size. With always-dirty its color will never change, even when on min value.
inverse-label プロパティを v-slider に設定すると、スライドの最後にラベルが表示されます。
tick-labels prop と slots を使うと、カスタマイズした動作を自分で作れます。
Tick マークは、ユーザーがスライダーを移動できる既定値を表します。
スライダーのカラーは、color、track-color、thumb-color props で設定できます。
範囲付きスライダーです。
Vuetify では、rules prop を使用することで単純なバリデーションが行えます。この prop はコールバック関数の配列を受け取ります。ルールのバリデーションを実行中は、現在の v-model の値はコールバック関数へ渡されます。このコールバック関数は、true またはエラーメッセージを表す String のいずれかを返さなければいけません。
prepend や append の slots を使用すれば、v-slider をどんな場所にも合うように簡単にカスタマイズできます。