§09-15Forms

スライダー / レンジ

つまみを動かして数値や範囲を選ぶ。

下限と上限をつまみで選び、数値を打たずに範囲を絞れる。価格帯や期間など、厳密な値より大まかな幅を素早く指定したい絞り込みに向く。

実装のポイント

2 本の input type=range を重ね、つまみだけ pointer-events を有効にする。最小値と最大値が交差しないよう、更新時に互いの値でクランプする。