価格ヒストグラム・スライダー
在庫の価格分布を棒グラフで見せ、下の二重スライダーで範囲を絞る。範囲内の棒だけ色づき、該当件数が更新される。Airbnb風の定番ECフィルタ。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 価格帯で絞り込む EC・宿泊・中古品の検索
- 分布を見せてゼロ件の絞り込みを避けたい一覧
- 下限と上限を同時に指定する範囲フィルタ
- 避ける場面
- 件数分布を出せない少数在庫
- 刻みが細かく正確な金額入力が要る場合
- 構成要素
- 範囲ラベル
- 該当件数
- 分布バー
- 選択範囲の帯
- 下限つまみ
- 上限つまみ
- 持っている状態
- 通常
- キーボード
Tab で下限・上限のつまみへ、←→／↑↓ で 1,000 円刻み、Home／End で端へ（ネイティブ range）
- 支援技術
2 本の range に aria-label（下限価格／上限価格）と aria-valuetext（¥表記）。分布バーは aria-hidden、範囲と件数は aria-live=polite で更新。つまみに focus-visible の輪郭。reduced-motion で着色の遷移停止
- 動き
範囲に入った棒の着色 150ms。つまみ移動に即応して件数を更新
デザインの要点
- 分布バーを先に見せてから絞らせる。件数 0 の範囲に山が無いのが見えれば、ゼロ件の絞り込みを避けられる
- 2 本の range を重ね、トラックは pointer-events:none・つまみだけ auto にする。両つまみを 1 つのレイヤーで扱う定石
- つまみが追い越したら操作中の側に揃える。下限＞上限を許すと件数が突然 0 になる
- 件数はつまみを動かすたびに即時更新する。離してから更新すると試行錯誤ができない
実装メモ
重ねた2本の <input type=range>（下限・上限）でレンジを作り、トラック側は pointer-events:none、つまみだけ pointer-events:auto にして両つまみを操作可能にする定石です。上のヒストグラムは固定のダミー分布で、選択範囲に入る棒だけ着色し件数を合算します。Airbnbなどが採用する「ゼロ件を避ける」ECフィルタUX。実運用では在庫データから分布と件数を算出してください。
コード（コピーして使えます）
<div class="ph-wrap">
<div class="ph-head" aria-live="polite">
<span class="ph-range" id="ph-range">¥4,000 〜 ¥16,000</span>
<span class="ph-count" id="ph-count">該当 214件</span>
</div>
<div class="ph-bars" id="ph-bars" aria-hidden="true"></div>
<div class="ph-slider">
<div class="ph-track"></div>
<div class="ph-fill" id="ph-fill"></div>
<input type="range" id="ph-min" min="0" max="20000" step="1000" value="4000" aria-label="下限価格">
<input type="range" id="ph-max" min="0" max="20000" step="1000" value="16000" aria-label="上限価格">
</div>
</div>