価格レンジ＋数値入力

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

ENGLISH

Dual-Handle Range with Inputs

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

プレビュー

ドラッグ

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

仕様書

向く場面: 価格帯・面積など数値の上下限で絞る EC・不動産検索
スライダーと数値入力を双方向に同期させたい欄
適用前に該当件数を見せたいフィルタ
避ける場面: 値が1つだけの入力（単一の range で足りる）
離散的な選択肢（¥2,000〜5,000 のような帯はチップ）
構成要素: 見出し
該当件数
トラック（塗り）
下限・上限ハンドル
数値入力欄
持っている状態: 通常
フォーカス
押下中
キーボード: ハンドルにフォーカスし ←↓で −100／→↑で＋100、PageUp・PageDown で ±2,000、Home・End で端。数値欄は Tab で到達し直接入力
支援技術: ハンドルは role=slider・tabindex=0・aria-label 下限／上限・aria-valuemin/max/now、aria-valuetext で ¥表記。件数は aria-live=polite で数値欄の aria-describedby が参照。数値欄は label で包む
動き: なし

デザインの要点

スライダーだけだと「¥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" aria-describedby="rfi-count"></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" aria-describedby="rfi-count"></label>
  </div>
  <p class="rfi-hint">ドラッグ・矢印キー・直接入力のどれでも同じ値になります</p>
</div>