EC・商品
価格ヒストグラム・スライダー
在庫の価格分布を棒グラフで見せ、下の二重スライダーで範囲を絞る。範囲内の棒だけ色づき、該当件数が更新される。Airbnb風の定番ECフィルタ。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
実装メモ
重ねた2本の <input type=range>（下限・上限）でレンジを作り、トラック側は pointer-events:none、つまみだけ pointer-events:auto にして両つまみを操作可能にする定石です。上のヒストグラムは固定のダミー分布で、選択範囲に入る棒だけ着色し件数を合算します。Airbnbなどが採用する「ゼロ件を避ける」ECフィルタUX。実運用では在庫データから分布と件数を算出してください。
コード（コピーして使えます）
<div class="ph-wrap">
<div class="ph-head">
<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>