Back to elements
ElementForm & InputFree
Dual Range Slider React component
A two-handle range filter with a histogram behind it: bars inside the range light up, the result count rolls as you drag, the filled part drags both ends together, and Min / Max fields stay in sync for exact numbers.
When to use the Dual Range Slider component
Use Dual Range Slider to filter by a numeric range where the shape of the data matters: prices, sizes, dates, durations. The histogram shows where the results are before people drag.
For a single value or a simple range without data, use Slider.
Installation
Add the Dual Range Slider component to your project with the shadcn CLI. It lands in components/dual-range-slider.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add https://reactframe.com/r/dual-range-slider.jsonOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion clsx tailwind-mergeFAQ
- When should I fetch new results?
- Use onValueCommit. It fires when a drag ends, a key is pressed or a number field is committed, so you don't refetch on every pixel.
- Can people type exact numbers?
- Yes. The Min and Max fields accept a number and snap it to the step when you press Enter or leave the field; Escape cancels.
- How does minGap work?
- The handles can't get closer than minGap, and each handle's aria-valuemin / aria-valuemax reflect that.
