UI Component Lab入力
Slider スライダー
つまみを溝に沿って動かし、範囲内の数値を選ぶ部品。
デモ
別名
- Range — HTML (<input type="range">)
見分けるポイント
横線の上に丸いつまみがある。つまみより手前の線はアクセントカラーで塗られることが多い。
挙動
- つまみをドラッグするか、溝をクリックすると値が変わる。
- 音量や明るさのように、正確な数値より大まかな位置が大事なときに向いている。
- 値は決まった刻みで変わる。このデモは5刻み。
キーボード操作
| キー | 動作 |
|---|---|
| → / ↑ | 値を1刻み増やす。 |
| ← / ↓ | 値を1刻み減らす。 |
| Home | 最小値にする。 |
| End | 最大値にする。 |
| Page Up / Page Down | 値を大きめに増減する（ブラウザによる）。 |
似た部品との違い
- 数値入力（スピンボタン）: スライダーはつまみで大まかな位置を選び、数値入力は正確な数値が大事なときに向いている。
出典
- WAI-ARIA APG: Slider Pattern (最終確認日: )
- MDN: <input type="range"> (最終確認日: )