レンジスライダー
Range Slider
別名: デュアルスライダー、範囲スライダー、Dual-thumb slider、Min-max slider
生態（さわってみる）
一言定義
2つのつまみを操作して最小値・最大値の範囲を同時に指定する入力UI。
分類
使う場面
- 価格帯・日付範囲など、最小値と最大値を同時に指定させたいとき
- EC商品検索の絞り込みなど、範囲指定がその場で結果に反映されるとき
避ける場面
- 単一の値だけを調整すればよいとき（→スライダー）
- つまみの正確な数値をキーボードで打ち込ませたいとき（→2つのテキストフィールドや数値ステッパー）
近縁種との比較
スライダーとの違いはつまみの数で、単一値の調整はスライダー、価格帯や日付範囲のように 最小値・最大値を同時に指定したい場合はレンジスライダーを使う。ネイティブHTMLには複数つまみの range要素が存在しないため、2本のinput[type=range]を重ねる簡易実装か、独自にrole=“slider”を 2つ描画するカスタム実装のいずれかが必要になる、という実装上の制約が付きまとう。
近縁種
実例リンク
アクセシビリティ
- role
- 2つの input[type="range"] を重ねる実装、またはカスタムなら role="slider" を2つ（各々に aria-valuemin/aria-valuemax/aria-valuenow）
- キーボード操作
- 各つまみにTabで個別に到達、矢印キーでそのつまみのみ移動
- 補足
- ネイティブ<input type=range>を2本重ねる実装は手軽だが、値が近いとつまみが重なり掴みにくくなる制限がある。本格運用では専用ライブラリかカスタムslider実装が必要になることが多い