Slider | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
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's 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.Track, Slider.FilledTrack, and Slider.Thumb composes the  component.
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of 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