スライダー
Slider
別名: レンジ、つまみスライダー、Range input、Track slider
生態（さわってみる）
一言定義
つまみをドラッグして一定範囲内の単一の値を連続的に調整する入力UI。
分類
使う場面
- 音量・明るさなど、正確な数値よりも相対的な量の感覚で調整させたいとき
- 選択できる値が連続的で、あらかじめ決まった最小・最大があるとき
避ける場面
- 数値の正確な指定が重要で、キーボードでの直接入力がふさわしいとき（→数値ステッパーやテキストフィールド）
- 範囲（最小〜最大の両方）を同時に指定させたいとき（→レンジスライダー）
近縁種との比較
レンジスライダーとはつまみが1つか2つかで区別され、単一の値を調整するならスライダー、 最小・最大の範囲を同時に指定するならレンジスライダーを使う。正確な数値をキーボードで 打ち込ませたい場合は数値ステッパーやテキストフィールドの方が適しており、スライダーは 「だいたいこのくらい」という相対的な量の感覚を優先する調整に向く。
実例リンク
アクセシビリティ
- role
- ネイティブ input[type="range"]
- キーボード操作
- 矢印キーで最小刻み変化、Page Up/Downで大きく変化、Home/Endで最小値・最大値へ
- 補足
- 現在値は<output>要素やaria-valuetextで視覚・スクリーンリーダー双方に伝える。ネイティブ要素を使えばキーボード操作を自前実装せずに得られる