Skip to content
Spiral
/
/
Give feedback
Slider
Sliders allow users to select a value or range along a continuous scale.
Single value
Show code
With label
Label
(Optional)
50%
Show code
With tooltip
Label
(Optional)
50%
Show code
Range
Show code
With label
Label
(Optional)
Show code
With tooltip
Label
(Optional)
Show code
API References
Prop
Type
Default
value / onChange
number
(value: number) => void
—
low / high / onChange
number
(low: number, high: number) => void
—
min / max
number
0 / 100
label / optional
ReactNode
boolean
—
showAmount
boolean
true
tooltip
"drag"
"always"
"never"
"drag"
formatValue
(value: number) => ReactNode
(v) => `${v}%`
aria-label
string
—
snap
boolean
false
className
string
" "
