カスタムレンジスライダー

解説

これは見た目を整えたカスタムレンジスライダーで、つまみを動かすと選んだ価格がその場で表示に反映されます。土台は標準の input type=range で、appearance:none でブラウザ既定の見た目を消し、::-webkit-slider-thumb と ::-moz-range-thumb でつまみを丸く整えています。値が変わるたびに input イベントで割合を計算し、トラックの背景を linear-gradient で塗り分けて「ここまで選んだ」量を可視化します。表示金額は toLocaleString('ja-JP') で桁区切りを付け、末尾に「円」を添えています。

使う場面

• 検索条件で価格や予算の上限を選ばせる絞り込み
• 数量・人数・割合などを直感的に決めてもらう入力
• 設定画面で音量や明るさのような連続値を調整するとき

範囲は min max step で決め、初期位置は value で設定します。色はアクセントの #0066cc を置き換えれば統一でき、塗りと未選択部分の境目も同じ色指定で調整できます。注意点として、つまみのスタイルはブラウザごとに別の擬似要素で指定する必要があるため、両方を書いておくことが見た目を揃える鍵です。標準入力が土台なのでキーボードの矢印キーでも操作できます。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録