Slider | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 allows users to select options from a given range of values.
Show Code
Playground
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
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