Range Slider
Dual-thumb range slider with a minimum gap and keyboard control, ideal for price filters.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
RangeSliderProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | [number, number] | — | — |
| defaultValue | [number, number] | [25, 75] | — |
| onValueChange | (value: [number, number]) => void | — | — |
| min | number | 0 | — |
| max | number | 100 | — |
| step | number | 1 | — |
| minGap | number | 0 | Smallest allowed distance between the two thumbs |
| disabled | boolean | false | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/range-slider.json