価格レンジ＋数値入力

2つのハンドルと「下限・上限」の数値入力が双方向に連動する価格フィルタ。ドラッグでも直接入力でも同じ値になり、該当件数がその場で更新される。矢印キーでも動く。

ENGLISH

Dual-Handle Range with Inputs

約96行基本のUI部品 / 検索・絞り込みの一覧 →

プレビュー

ドラッグ

操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。

デザインの要点

スライダーだけだと「¥4,980 以下」のような正確な値を狙えない。入力欄との同期は精度のためで、飾りではない
入力で下限が上限を超えたらエラーにせず、上限に揃える。フィルタで叱られる理由はない
件数はフィルタ本体の隣に置く。「適用」の前に結果の量が分かれば、押してから戻る往復が消える

プロのサイトでの実例

Airbnb別サイト ↗絞り込みの価格帯が、スライダーと最低・最高の入力欄を1組にして連動させる型

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<div class="rfi">
  <div class="rfi-head">
    <span class="rfi-title">価格</span>
    <span class="rfi-count" id="rfi-count" aria-live="polite"></span>
  </div>
  <div class="rfi-slider" id="rfi-slider">
    <div class="rfi-track"><div class="rfi-fill" id="rfi-fill"></div></div>
    <div class="rfi-handle" id="rfi-lo" role="slider" tabindex="0" aria-label="下限" aria-valuemin="0" aria-valuemax="30000" aria-valuenow="2000" aria-valuetext="¥2,000"></div>
    <div class="rfi-handle" id="rfi-hi" role="slider" tabindex="0" aria-label="上限" aria-valuemin="0" aria-valuemax="30000" aria-valuenow="12000" aria-valuetext="¥12,000"></div>
  </div>
  <div class="rfi-inputs">
    <label class="rfi-field"><span class="rfi-fl">下限</span><span class="rfi-yen">¥</span><input id="rfi-min" type="number" inputmode="numeric" min="0" max="30000" step="100" value="2000"></label>
    <span class="rfi-dash" aria-hidden="true">〜</span>
    <label class="rfi-field"><span class="rfi-fl">上限</span><span class="rfi-yen">¥</span><input id="rfi-max" type="number" inputmode="numeric" min="0" max="30000" step="100" value="12000"></label>
  </div>
  <p class="rfi-hint">ドラッグ・矢印キー・直接入力のどれでも同じ値になります</p>
</div>