範囲スライダーRangeSliderExperimental
境界のある範囲から最小値と最大値を選択するスライダーです。
プレビュー
状態とバリエーション
範囲指定
最小値と最大値を同じトラック上で指定します。
刻み幅
価格帯や容量のように、決まった単位で選ばせたい時に使います。
入力欄との連動
正確な値を指定したい場合は、数値入力と組み合わせます。
無効化
操作できない理由はツールチップで伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | [number, number] | - | 外部から渡す最小値と最大値です。 |
| defaultValue | [number, number] | - | 内部状態で使う場合の初期値です。 |
| onValueChange | (value: [number, number]) => void | - | どちらかのつまみが変わった時に呼ばれます。 |
| min | number | 0 | 選択できる最小値です。 |
| max | number | 100 | 選択できる最大値です。 |
| step | number | 1 | つまみを動かす単位です。 |
| minLabel | string | 'Minimum value' | 下限つまみの支援技術向けラベルです。 |
| maxLabel | string | 'Maximum value' | 上限つまみの支援技術向けラベルです。 |
使い方
import { RangeSlider } from "@gunjo/ui";
<RangeSlider
value={[min, max]}
onValueChange={([nextMin, nextMax]) => {
setMin(nextMin);
setMax(nextMax);
}}
min={0}
max={100}
step={1}
minLabel="最小値"
maxLabel="最大値"
/>