PriceRangeSlider

Dual-handle filter slider, snaps to step, won't let handles cross.

components/price-range-slider.tsxPeer deps:

Live preview

$25$125

Usage

import { PriceRangeSlider } from "@/components/price-range-slider";

const [range, setRange] = useState<[number, number]>([0, 20000]);

<PriceRangeSlider
  min={0}
  max={20000}
  step={500}
  value={range}
  onChange={setRange}
/>