Slider — a Material You inputs component for React Native and web.
packages/ui/src/components/Slider.tsx
Live demo
360
720
Full
Volume
40
Properties
8 controls
Value
Min
Max
Step (0 = off)
Label
Show Value
Marks
Disabled
Usage
Slider.tsx
<Slidervalue={40} label="Volume" />
Variants
The states and shapes this component is meant to be used in.
With value label
Volume
40
Brightness
82
Microphone gain
0
Marks
Image quality
75
Team seats
6
Ranges and steps
Playback speed
1.5
Monthly budget (€)
2400
Zoom
Disabled
Storage quota (fixed by plan)
30
Retention (days)
90
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
12 on SliderProps
Filter props
onValueChange
required
(value: number) => void
value
required
number
disabled
boolean
feedback
boolean
default: true
Report each step the thumb crosses to `ThemeProvider`'s
`onInteractionFeedback` (haptics), as a selection. Only with a `step`: a
continuous slider would report every pixel. Defaults to true.