Version: 3.0.6

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's used to change the slider value.
import { Slider } from 'native-base';

Examples#

Color#

Value#

Size#

Customised#

Form Controlled#

Props#

Slider#

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.

Styling#

NativeBase ships with a default theme for each component.
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 */}
</NativeBaseProvider>
)
}

Accessibility#

Adheres to the Slider WAI-ARIA design pattern.

Keyboard Interactions#

NameDescription
ArrowRightIncrements/decrements by the step value depending on orientation.
ArrowLeftIncrements/decrements by the step value depending on orientation.
ArrowUpIncreases the value by the step amount.
ArrowDownDecreases the value by the step amount.