Loading navigation…
User
API and Development
Slider displays an interactive control for selecting a single value or a range of values from a continuous or discrete set. Sliders provide visual feedback and allow precise value selection through dragging or keyboard navigation. It provides both single-value and range selection interfaces built on Radix UI's Slider component, ensuring consistent slider patterns across the interface with full keyboard and screen reader accessibility. Sliders support optional input fields for direct value entry, custom min/max/step values, and both controlled and uncontrolled states.
| Name | Default | Description |
|---|---|---|
value | Currently selected value (controlled component). | |
defaultValue | Default selected value (uncontrolled component). | |
onChange | Callback function called when the value changes: (value: number) => void. | |
min | 0 | Minimum value for the slider. |
max | 100 | Maximum value for the slider. |
step | 1 | Step amount for value increments. |
showInput | false | Whether to show an input field alongside the slider. |
inputPlaceholder | Placeholder text for the input field. | |
inputWidth | "8rem" | Custom width for the input field. |
disabled | false | Whether the slider is disabled. |
name | The name attribute for form submission. | |
id | Unique identifier for the slider element. | |
aria-label | Accessible label for the slider. | |
aria-labelledby | ID of the element that labels the slider. | |
aria-describedby | ID of the element that describes the slider. |
| Name | Default | Description |
|---|---|---|
value | Currently selected range as a tuple [number, number] (controlled component). | |
defaultValue | Default selected range as a tuple [number, number] (uncontrolled component). | |
endValue | required | Initial end value for the range slider. |
startValue | Initial start value for the range slider. | |
onChange | Callback function called when the range changes: (values: [number, number]) => void. | |
min | 0 | Minimum value for the slider. |
max | 100 | Maximum value for the slider. |
step | 1 | Step amount for value increments. |
showInput | false | Whether to show input fields alongside the slider. |
startInputPlaceholder | "Min" | Placeholder text for the start value input field. |
endInputPlaceholder | "Max" | Placeholder text for the end value input field. |
inputWidth | "8rem" | Custom width for the input fields. |
disabled | false | Whether the slider is disabled. |
name | The name attribute for form submission. | |
id | Unique identifier for the slider element. | |
aria-label | Accessible label for the slider. | |
aria-labelledby | ID of the element that labels the slider. | |
aria-describedby | ID of the element that describes the slider. |
Use for simple single-value selection.
Control slider value programmatically.
Display an input field for direct value entry.
Set custom min, max, and step values.
Provide context with a label.
Disable sliders when options are unavailable.
Select a range of values with start and end points.
Display input fields for both start and end values.
Control range values programmatically.
Use range sliders for filtering by price or other ranges.
Use sliders for volume or similar controls.
Use sliders within forms with proper naming.