デュアルレンジスライダー

解説

最小値と最大値の 2 つのつまみで範囲を選べるデュアルレンジスライダーです。2 本の input type=range を同じトラック上に重ね、pointer-events:none とつまみ側の個別指定で、それぞれのハンドルだけ操作できるようにしています。JavaScript は両方の値を読み取り、最小が最大を上回ったら入れ替えてから、塗りつぶしバーの left と width を更新し、表示金額を toLocaleString() でカンマ区切りに整形します。

向いている場面

• EC サイトや不動産検索の価格帯フィルター
• 面積・年式・評価などの数値レンジ絞り込み
• ダッシュボードでの期間や閾値の指定

金額のスケールは JS の a*1000 の係数を変えるだけで桁を調整できます。min max 属性を変えれば刻みや上限も自由です。ネイティブの input を土台にしているのでキーボード操作にも対応しますが、つまみが重なったときの操作性を確かめ、色やコントラストを背景に合わせて見やすく整えると安心です。

使用例・適したシーン

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