Range Slider
New
Dual-handle slider for selecting value ranges like price, age, or percentages. Built on top of the Slider component with enhanced UX for range selection.
Preview
$0$1000
Installation
Terminalbash
Basic Usage
Reacttsx
Examples
Price Range
$100$500
$0$1000
tsx
Age Range
18100
tsx
Percentage Range
20%80%
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value of the range |
max | number | 100 | Maximum value of the range |
step | number | 1 | Step increment for the slider |
value | [number, number] | undefined | Controlled range value [min, max] |
defaultValue | [number, number] | [min, max] | Default range value [min, max] |
onValueChange | (value: [number, number]) => void | undefined | Callback when range value changes |
formatLabel | (value: number) => string | (val) => val.toString() | Function to format value labels (e.g., for currency) |
showLabels | boolean | false | Show current values above the slider thumbs |
showMinMax | boolean | false | Show min/max labels below the slider |
disabled | boolean | false | Disable the slider |
dir | 'ltr' | 'rtl' | auto-detect | Force text direction (auto-detects from context) |
Features
RTL Support
Automatically adapts to RTL layouts with proper thumb positioning and value display.
Custom Formatting
Format values as currency, percentages, or any custom format using the formatLabel prop.
Flexible Labels
Show current values above thumbs and min/max labels below the slider for better UX.
Accessible
Built on Radix UI primitives with full keyboard navigation and screen reader support.