カラフルなレンジスライダー
カラフルなレンジスライダーは、つまみをドラッグして 数値を直感的に選ぶ 入力 UI です。土台は標準の input type="range" で、トラックには linear-gradient でグラデーションをかけ、 ::-webkit-slider-thumb 擬似要素でつまみの形・色・影をブラウザ既定から作り変…
解説
カラフルなレンジスライダーは、つまみをドラッグして数値を直感的に選ぶ入力 UI です。土台は標準の input type="range" で、トラックには linear-gradient でグラデーションをかけ、::-webkit-slider-thumb 擬似要素でつまみの形・色・影をブラウザ既定から作り変えています。JavaScript は input イベントで現在値を読み取り、ラベル横の数字へ即座に反映するだけのシンプルな構成で、動かすたびに選択中の値が分かります。
使える場面
- 価格やコストの絞り込み（予算スライダー）
- 音量・明るさ・透明度の調整
- 件数や割合など連続値の設定
範囲や刻みは min・max・step 属性で決まり、用途に合わせて書き換えられます。トラックの色はグラデーションの停止色、つまみは擬似要素の background で変更可能です。注意点として、つまみの装飾は WebKit 系と Firefox で別々の擬似要素を指定する必要があるため、両対応のルールを残してください。キーボードの矢印キーでも値を動かせるので、フォーカス時のスタイルを足すとアクセシビリティが向上します。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
選べる範囲や刻み幅を変えられますか？
input 要素の min・max・step 属性で決まります。たとえば 0 から 100000 まで 1000 刻みにしたい場合は、これらの値を書き換えてください。初期位置は value 属性で指定します。
つまみやトラックの色を変えたいです
トラックは linear-gradient の停止色、つまみは ::-webkit-slider-thumb（Firefox では ::-moz-range-thumb）の background で指定しています。両ブラウザで擬似要素が分かれているため、両方を揃えて変更すると見た目が統一されます。