# Sliders

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

# 使い方

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

# API

# サンプル

# Props

# Colors

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

# Disabled

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

# Discrete

Discrete sliders offer a thumb label that displays the exact current amount. Using the step prop you can disallow selecting values outside of steps.

# アイコン

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

# Inverse label

v-slider with inverse-label property displays label at the end of it.

# 最小値と最大値

minmax の値を設定できます。

# Readonly

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

# Step

v-slider can have steps other than 1. これは、値を調整する必要がある一部のアプリケーションで役立ちます。

# Thumb

You can display a thumb label while sliding or always with the thumb-label prop . It can have a custom color by setting thumb-color prop and a custom size with the thumb-size prop. With the always-dirty prop its color will never change, even when on the `min value.

# Ticks

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

# バリデーション

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

# 垂直スライダー

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

# Slots

# append と prepend

Use slots such as append and prepend to easily customize the v-slider to fit any situation.

# Append text field

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

準備はできましたか?

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