スライダー

スライダーは、ドラッグハンドル付きの入力値を提供するコンポーネントです。

インポート #


import Slider from 'primevue/slider';

基本 #

双方向バインディングは、標準のv-modelディレクティブを使用して定義されます。


<Slider v-model="value" class="w-56" />

入力 #

スライダーは、双方向バインディングを使用して入力フィールドに接続されています。


<InputText v-model.number="value" />
<Slider v-model="value" />

ステップ #

各移動のサイズは、stepプロパティで定義されます。


<Slider v-model="value" :step="20" class="w-56" />

範囲 #

rangeプロパティが存在する場合、スライダーは2つのハンドルを提供して2つの値を定義します。範囲モードでは、値は単一の値ではなく配列である必要があります。


<Slider v-model="value" range class="w-56" />

フィルター #

複数のスライダーを使用した画像フィルターの実装。


<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />

垂直 #

スライダーのデフォルトレイアウトは水平です。別の垂直モードには、orientationプロパティを使用します。


<Slider v-model="value" orientation="vertical" class="h-56" />

アクセシビリティ #

スクリーンリーダー

スライダー要素コンポーネントは、aria-orientation、aria-valuemin、aria-valuemax、aria-valuenow属性に加えて、ハンドルにsliderロールを使用します。コンポーネントを説明する値は、aria-labelledbyとaria-labelプロップを使用して定義できます。


<span id="label_number">Number</span>
<Slider aria-labelledby="label_number" />

<Slider aria-label="Number" />

キーボードサポート

キー	機能
tab	スライダーにフォーカスを移動します。
左矢印上矢印	値を減らします。
右矢印下矢印	値を増やします。
home	最小値を設定します。
end	最大値を設定します。
page up	値を10ステップ増やします。
page down	値を10ステップ減らします。