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.
Props
Slider Props
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. LocalizedMessage from formatMessage.
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.
RangeSlider Props
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. LocalizedMessage from formatMessage.
endInputPlaceholder
"Max"
Placeholder text for the end value input field. LocalizedMessage from formatMessage.
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.
Basic Slider
Use for simple single-value selection.
Controlled Slider
Control slider value programmatically.
Slider with Input
Display an input field for direct value entry.
Custom Range
Set custom min, max, and step values.
Slider with Label
Provide context with a label.
Disabled Slider
Disable sliders when options are unavailable.
Range Slider
Select a range of values with start and end points.
Range Slider with Inputs
Display input fields for both start and end values.
Controlled Range Slider
Control range values programmatically.
Price Range Example
Use range sliders for filtering by price or other ranges.