Vuetify

ショップ

企業向け

v-slider コンポーネントは数値の入力をうまく可視化できます。数値のユーザーデータに利用されます。

スライダーはバーの範囲の値を反映します。ユーザーは1つの値を指定することもできます。音量・明るさ・画像フィルタの設定の調整などに適しています。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

スライダーには、minmax の値を設定できます。

スライダーに 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 マークは、ユーザーがスライダーを移動できる既定値を表します。

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

範囲付きスライダーです。

Vuetify では、rules prop を使用することで単純なバリデーションが行えます。この prop はコールバック関数の配列を受け取ります。ルールのバリデーションを実行中は、現在の v-model の値はコールバック関数へ渡されます。このコールバック関数は、true またはエラーメッセージを表す String のいずれかを返さなければいけません。

prependappend の slots を使用すれば、v-slider をどんな場所にも合うように簡単にカスタマイズできます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!