スライダー

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

インポート#


import { Slider } from 'primereact/slider';
         

基本#

スライダーは、`value` プロパティと `onChange` プロパティを使用して制御された入力として使用されます。


<Slider value={value} onChange={(e) => setValue(e.value)} />
         

入力#

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


<InputText value={value} onChange={(e) => setValue(e.target.value)} />
<Slider value={value} onChange={(e) => setValue(e.value)} />
         

ステップ#

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


<Slider value={value} onChange={(e) => setValue(e.value)} step={20} />
         

範囲#

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


<Slider value={value} onChange={(e) => setValue(e.value)} range />
         

フィルター#

スライダーは、`value` プロパティと `onChange` プロパティを使用して制御された入力として使用されます。

user header
コントラスト
明るさ
セピア

<img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
<SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
<Slider
    value={filterValues[filter]}
    onChange={(e) => {
        const newFilterValues = [...filterValues];
        newFilterValues[filter] = e.value;
        setFilterValues(newFilterValues);
    }}
    className="w-14rem"
    min={0}
    max={200}
/>
         

垂直#

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


<Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" />
         

アクセシビリティ#

スクリーンリーダー

スライダー要素コンポーネントは、`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ステップ減らします。
                  PrimeReact 10.8.3 by PrimeTek