レンジスライダー
スライダーを動かすと値がリアルタイムに数値表示され、達成部分のトラックに色が乗る。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 満足度・音量など1つの値を大まかに決める入力
- 値をリアルタイムに大きく表示したい設定画面
- 達成部分を色で見せたいゲージ型の入力
- 避ける場面
- 正確な値を狙う入力（数値欄と組み合わせる）
- 上下限の2値（2ハンドルのレンジを使う）
- 構成要素
- ラベル
- 現在値
- トラック（塗り）
- つまみ
- 目盛り
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
ネイティブ range: Tab で到達し ←↓で −1／→↑で ＋1、PageUp・PageDown で大きく、Home・End で端へ
- 支援技術
ネイティブ input[type=range] なので role=slider と値の読み上げは自動。label[for] で名前を結び、現在値は output（role=status）で読み上げる。:focus-visible でつまみに 2px のリング。reduced-motion で transition 無効
- 動き
つまみ 1.15倍 150ms（hover／active）、塗り 50ms で値に追従。reduced-motion で無効
デザインの要点
- ネイティブの range を使い、見た目だけ appearance:none で描き直す。矢印キー・Home/End・読み上げが自前実装なしで付いてくる
- 達成部分の塗りは CSS 変数 --pct を JS が更新し、トラックの gradient が読む。DOM を足さずに済む
- 現在値は 22px の大きな数字で右上に。つまみの位置だけでは「70」と「72」の差が読めない
- input の高さは 24px 確保し、トラック 6px はその中に描く。細い線そのものを標的にすると指で外す
コード（コピーして使えます）
<div class="rs-wrap">
<div class="rs-header">
<label class="rs-label" for="rs-input">満足度</label>
<output class="rs-value" id="rs-value" for="rs-input">70</output>
</div>
<input
id="rs-input"
class="rs-input"
type="range"
min="0"
max="100"
value="70"
/>
<div class="rs-ticks" aria-hidden="true">
<span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
</div>
</div>