RangeSlider
Markdown for agentsDual-thumb numeric range slider with labeled native inputs and formatted values.
npx @slipstream-ui/cli@latest add range-sliderRevenue range filter
Revenue range
$5M$100M
Showing deals from $5M to $100M revenue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | [number, number] | — | Controlled low/high pair. |
| defaultValue | [number, number] | — | Initial low/high pair when uncontrolled. Defaults to [min, max]. |
| onValueChange | (value: [number, number]) => void | — | Fires with the next low/high pair. |
| min | number | 0 | Lower bound. |
| max | number | 100 | Upper bound. |
| step | number | 1 | Increment. |
| startLabel | string | 'Minimum' | Accessible label for the low thumb. |
| endLabel | string | 'Maximum' | Accessible label for the high thumb. |
| formatValue | (value: number) => string | — | Formats the displayed values and aria-valuetext. |
| showValues | boolean | true | Show the current low/high values above the track. |
| disabled | boolean | — | Disable both thumbs. |
Accessibility
- Uses two native range inputs, each with its own label and aria-valuetext.
- The low thumb cannot cross the high thumb, so the pair always stays ordered.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.