レンジスライダー
Range Slider2つのつまみを操作して最小値・最大値の範囲を同時に指定する入力UI。
○ 使う場面
- 価格帯・日付範囲など、最小値と最大値を同時に指定させたいとき
- EC商品検索の絞り込みなど、範囲指定がその場で結果に反映されるとき
× 避ける場面
- 単一の値だけを調整すればよいとき（→スライダー）
- つまみの正確な数値をキーボードで打ち込ませたいとき（→2つのテキストフィールドや増減ボタン）
別名
デュアルスライダー、範囲スライダー
近縁種との比較
ネイティブHTMLには複数つまみの range要素が存在しないため、2本のinput[type=range]を重ねる簡易実装か、独自にrole=“slider”を 2つ描画するカスタム実装のいずれかが必要になる、という実装上の制約が付きまとう。「スライダー」という名称は、音響ミキサーや照明機材のフェーダーのように、つまみを溝に沿って直線的に滑らせて値を調整する物理的な操作部品に由来するとされる。
| 近縁種 | 違い・使い分け |
|---|---|
| スライダー | スライダーとの違いはつまみの数で、単一値の調整はスライダー、価格帯や日付範囲のように最小値・最大値を同時に指定したい場合はレンジスライダーを使う。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション