スライダー + 数値同期
レンジスライダーと数値入力欄が双方向に連動する金額・数量入力 UI です。 input type="range" と input type="number" の両方の oninput から共通の update 関数を呼び、片方を動かすともう片方と表示テキストが同時に更新されます。
解説
レンジスライダーと数値入力欄が双方向に連動する金額・数量入力 UI です。input type="range" と input type="number" の両方の oninput から共通の update 関数を呼び、片方を動かすともう片方と表示テキストが同時に更新されます。表示部は toLocaleString で3桁区切りにし、¥30,000 のように読みやすく整形します。直感操作（スライダー）と正確入力（数値）の両立が利点です。
向いている用途
- EC や寄付フォームの金額指定
- 予約システムの人数・泊数の選択
- 絞り込み検索の価格帯スライダー
上限・下限・刻み幅は両方の入力の min max step をそろえて変えるだけです。アクセントカラーは accent-color でブランド色に合わせられます。注意点として、数値欄に範囲外の値を直接入力されても止まらないため、実運用では送信前に上限・下限へ丸める処理を足すと安全です。スライダー単体だと細かい値が選びにくいので、数値欄を併設している今の構成は入力精度の面でも理にかなっています。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
金額の上限や刻み幅を変えられますか
変えられます。スライダーと数値欄の両方にある最小値・最大値・刻みの設定を同じ値にそろえて書き換えるだけです。たとえば刻みを1000円から100円にすれば、より細かく金額を選べます。
数値を直接打ち込んでもスライダーは動きますか
動きます。数値欄に入力すると、その値に合わせてスライダーのつまみと下の表示金額が一緒に更新されます。逆にスライダーを動かせば数値欄も変わる、双方向の連動になっています。