カスタムレンジスライダー
標準の input type=range を見栄えよく仕立てた、カスタムスライダーです。ブラウザ既定の地味な見た目を、 -webkit-appearance:none で一度リセットし、トラック（バー）とつまみを自前のスタイルで描き直しています。
解説
標準の input type=range を見栄えよく仕立てた、カスタムスライダーです。ブラウザ既定の地味な見た目を、-webkit-appearance:none で一度リセットし、トラック（バー）とつまみを自前のスタイルで描き直しています。注目は進捗の塗り分けで、JavaScript が現在値の割合を計算して CSS 変数 --pct に渡し、linear-gradient の境界をその割合に合わせます。これでつまみの左側だけが色付きになり、どこまで動かしたかが一目で分かります。値はリアルタイムで「50,000円」のように toLocaleString で3桁区切り表示します。
使う場面
- 予算や価格帯の絞り込みフィルター
- 音量・明るさなど連続値の設定UI
- 見積もりフォームでの数量・金額の指定
範囲や刻みは HTML の min max step を変えるだけで調整できます。色はグラデーションとつまみの背景を差し替えればブランドに馴染みます。注意点として、つまみのスタイルはブラウザごとに別の指定（WebKit系と Firefox 用）が必要なので、両方を当てると全環境で同じ見た目に揃います。ラベルは input と関連付け、キーボードの左右キーでも操作できる点を保つとアクセシブルです。
よくある質問
最小・最大の範囲を変えるには？
HTMLのinput要素のmin、max、step属性を変更します。たとえばmin=0、max=100、step=5にすれば0から100まで5刻みのスライダーになります。表示の単位やフォーマットはJavaScript側で調整します。
つまみの色がブラウザで違って見えます。
つまみの見た目はブラウザごとに別々の擬似要素で指定する必要があります。WebKit系のスライダーサムに加えてFirefox用の指定も書くと、主要ブラウザで同じデザインに揃えられます。