Version: 3.2.1

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#

Children components#

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

Styling#

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 */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

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.