Slider | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Slider
The Slider is used to allow users to make selections from a range of values.
Import
NativeBase exports 4 slider-related components:
Slider: The wrapper that provides context and functionality for all children.
Slider.Track: The empty part of the slider that shows the track.
Slider.FilledTrack: The filled part of the slider.
Slider.Thumb: The handle that is used to change the slider value.
Copy
import { Slider } from 'native-base';
Examples
Playground
Color
Playground
Value
Playground
Size
Playground
Customised
Playground
Form Controlled
Playground
Props
Slider
value
The current value of the Slider
Type: number
defaultValue
The default value (uncontrolled).
Type: number
onChange
Handler that is called when the value changes.
Type: (value: number) => void
colorScheme
Color scheme of the slider
Type: string
accessibilityLabel
Text description of slider. This will be announced by screen reader/
Type: string
isReversed
If true, the value will be incremented or decremented in reverse.
Type: boolean
orientation
The orientation of the Slider.
Type: "horizontal" | "vertical"
Default: 'horizontal'
isDisabled
Whether the whole Slider is disabled.
Type: boolean
onChangeEnd
Fired when the slider stops moving, due to being let go.
Type: (value: number) => void
minValue
The slider's minimum value.
Type: number
Default: 0
maxValue
The slider's maximum value.
Type: number
Default: 100
step
The slider's step value.
Type: number
Default: 1
Children components
Slider.TrackSlider.FilledTrack, and Slider.Thumb composes the  component.
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the Slider.
Info: We can easily extend the Slider component theme using extendTheme function as described in the documentation .
Accessibility
Keyboard Interactions
Name
Description
ArrowRight
Increments/decrements by the step value depending on orientation.
ArrowLeft
Increments/decrements by the step value depending on orientation.
ArrowUp
Increases the value by the step amount.
ArrowDown
Decreases the value by the step amount.
Nativebase logo
MadeWithNativeBase