A two thumb range slider with a filled track, value bubbles, a minimum gap, pointer dragging and full keyboard control.
Price per night
118 stays
npx shadcn@latest add https://hyperblur.dev/r/slider-range-dual.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/slider-range-dual.tsx.
import { SliderRangeDual } from "@/components/hyperblur/slider-range-dual"
<SliderRangeDual min={0} max={500} step={10} defaultValue={[120, 380]} minGap={20} />| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Value increment. |
| value | [number, number] | Controlled range. Pair with onValueChange. | |
| defaultValue | [number, number] | [25, 75] | Initial range when uncontrolled. |
| onValueChange | (value: [number, number]) => void | Called whenever either thumb moves. | |
| minGap | number | 0 | Smallest distance allowed between the thumbs, in value units. |
| formatValue | (value: number) => string | Formats the bubble text and the screen reader value. | |
| bubbles | "always" | "active" | "none" | "always" | When value bubbles show above the thumbs. |
| label | string | "Range" | Prefix of the thumb accessible names. |
| name | string | Adds hidden inputs named name-min and name-max. | |
| disabled | boolean | false | Disable the slider. |
| accent | string | "#2f7bff" | Fill and thumb color. |