Slider
Slider is an input control for selecting a value within a specified range. Supports both single value selection and range selection.
Playground
<Slider
defaultValue={[50]}
/>Sizes
smdefaultlg| Size | Track Height | Thumb | Preview |
|---|---|---|---|
sm | 4px | 14px | |
default | 6px | 18px | |
lg | 8px | 22px |
Features
Range
Pass two values to defaultValue to use as a range slider.
<Slider defaultValue={[25, 75]} />With Value
Pattern for displaying the value in controlled mode.
const [value, setValue] = useState([50])
<div className="space-y-4">
<div className="text-center">
<span className="text-2xl font-bold text-foreground tabular-nums">{value[0]}</span>
</div>
<Slider value={value} onValueChange={setValue} />
</div>States
<Slider defaultValue={[50]} />
<Slider defaultValue={[50]} disabled />API
Props
valueundefinednumber[]Value in controlled mode (array)
defaultValueundefinednumber[]Initial value in uncontrolled mode (array)
onValueChangeundefined(value: number[]) => voidCallback when value changes (fires during drag)
onValueCommitundefined(value: number[]) => voidCallback when drag is complete
color"default""default" | "primary"Color of the range and thumb
size"default""sm" | "default" | "lg"Slider size
min0numberMinimum value
max100numberMaximum value
step1numberStep value
minStepsBetweenThumbs0numberMinimum steps between thumbs in range mode
showTooltip"never""auto" | "always" | "never"Tooltip display mode. auto shows on hover/drag
formatLabelundefined(value: number) => stringFormat function for tooltip value
startContentundefinedReactNodeContent displayed on the left side of the slider (icon, label, etc.)
endContentundefinedReactNodeContent displayed on the right side of the slider
disabledfalsebooleanDisabled state
orientation"horizontal""horizontal" | "vertical"Layout direction
invertedfalsebooleanInvert the value direction
nameundefinedstringForm name attribute
| Name | Type | Default | Description |
|---|---|---|---|
value | number[] | undefined | Value in controlled mode (array) |
defaultValue | number[] | undefined | Initial value in uncontrolled mode (array) |
onValueChange | (value: number[]) => void | undefined | Callback when value changes (fires during drag) |
onValueCommit | (value: number[]) => void | undefined | Callback when drag is complete |
color | "default" | "primary" | "default" | Color of the range and thumb |
size | "sm" | "default" | "lg" | "default" | Slider size |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step value |
minStepsBetweenThumbs | number | 0 | Minimum steps between thumbs in range mode |
showTooltip | "auto" | "always" | "never" | "never" | Tooltip display mode. auto shows on hover/drag |
formatLabel | (value: number) => string | undefined | Format function for tooltip value |
startContent | ReactNode | undefined | Content displayed on the left side of the slider (icon, label, etc.) |
endContent | ReactNode | undefined | Content displayed on the right side of the slider |
disabled | boolean | false | Disabled state |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
inverted | boolean | false | Invert the value direction |
name | string | undefined | Form name attribute |
Customization
Pass a ReactNode to startContent / endContent to freely customize styles.
With Icon
startContent={<VolumeOff />}
endContent={<Volume2 />}Styled Labels
startContent={<span className="text-xs font-mono font-bold text-primary">$0</span>}
endContent={<span className="text-xs font-mono font-bold text-primary">$100</span>}Icon + Tooltip
<Slider
showTooltip="always"
formatLabel={(v) => `${v}%`}
startContent={<Sun />}
endContent={<Sun />}
/>Tip：startContent / endContent accept any ReactNode — strings, icons, or custom components. Font size auto-adjusts to match the Slider size.
Anatomy
6px18pxBest Practices
Do
- ✓Display the current value nearby
- ✓Set an appropriate step value
- ✓Use range mode for range selection
- ✓Clearly define the min/max range
Don't
- ✗Use Input instead for precise value entry
- ✗Avoid extremely small step values
- ✗Don't use without showing the current value
- ✗Avoid sliders that are too narrow on mobile
Accessibility
Keyboard Navigation
ARIA Attributes
role="slider"auto-appliedaria-valuemin/max/nowauto-managed- Focus indicator
- Touch support