REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Form Controls
Slider
A compound range slider component with track, filled track, and thumb sub-components for selecting numeric values.
Example
Preview
Code
Props
Slider Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the slider container.
value
number
—
The controlled current value of the slider.
defaultValue
number
—
The initial value when uncontrolled.
min
number
0
The minimum value of the slider.
max
number
100
The maximum value of the slider.
step
number
1
The step increment between values.
orientation
'horizontal' | 'vertical'
'horizontal'
The axis along which the slider operates.
size
'sm' | 'md' | 'lg'
'md'
Controls the track thickness and thumb size.
isDisabled
boolean
false
Disables the slider.
onValueChange
(value: number) => void
—
Callback invoked continuously as the slider value changes.
onSlidingComplete
(value: number) => void
—
Callback invoked when the user releases the slider thumb.
SliderTrack Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the slider track.
SliderFilledTrack Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the filled portion of the track.
SliderThumb Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the draggable thumb.
Usage Guidelines
When to use
Use Slider when users need to select a value from a continuous or stepped numeric range.
Best practices
•
Display the current value next to the slider for clarity.
•
Use step values appropriate to the data range.
•
Consider adding min/max labels for context.
Accessibility
Slider is accessible with keyboard and assistive technology. The current value is announced on change.
Related Components
Progress
A compound progress bar component that visually indicates the completion percentage of an operation.
Input
A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.
FormControl
A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.