範囲スライダー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 * as React from "react";
import { RangeSlider } from "@gunjo/ui";
export function PriceRangeFilter() {
const [range, setRange] = React.useState<[number, number]>([24, 72]);
return (
<RangeSlider
className="w-full max-w-sm"
value={range}
onValueChange={setRange}
min={0}
max={100}
step={1}
minLabel="最小値"
maxLabel="最大値"
/>
);
}設計の判断
- 本物の
input[type=range]を2本重ねた。自前のドラッグ処理は書かず、ネイティブの range を2本、同じ場所に重ねています。つまみだけがポインタを受け取り、帯と塗りは背後の飾りです。矢印キー・Home と End・読み上げが最初から効くのは、この作りのためです。 - つまみが交差したら、止めずに入れ替える。資料は「2つのハンドルが交差しないロジックを実装する」を挙げています。GUNJO は交差の手前で止めるのではなく、確定のときに小さいほうを最小・大きいほうを最大として並べ替えます。引っかかって動かないより、追い越せるほうが操作しやすいからです。
stepの丸めも同じ場所でやります。 - 数値の表示は、まだ書いていません。資料は「常に現在値を数値で表示する」を核に挙げていますが、この部品は帯とつまみだけで、数字を出しません。単位つきの表示も、数値入力との横並びも持たないので、いまは呼ぶ側が
valueを受け取って自分で書く形です。
一般のスライダーの設計は UIXHERO の「スライダー」にあります。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。