Version: 3.0.0


The Slider is used to allow users to make selections from a range of values.


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.
import { Slider } from 'native-base';






Form Controlled#



Name Type Description Default
value number The current value of the Slider -
defaultValue number The default value (uncontrolled). -
onChange (value: number) => void Handler that is called when the value changes. -
colorScheme string Color scheme of the slider -
accessibilityLabel string Text description of slider. This will be announced by screen reader/ -
isReversed boolean If true, the value will be incremented or decremented in reverse. -
orientation "horizontal" | "vertical" The orientation of the Slider. 'horizontal'
isDisabled boolean Whether the whole Slider is disabled. -
onChangeEnd (value: number) => void Fired when the slider stops moving, due to being let go. -
minValue number The slider's minimum value. 0
maxValue number The slider's maximum value. 100
step number The slider's step value. 1

Slider implements Box

Children components#

  • Slider.TrackSlider.FilledTrack, and Slider.Thumb composes the Box component.


NativeBase ships with a default theme for each component. Checkout the default theme of Slider
We can easily extend the Slider component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Slider: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
Read more about extending component theme here.