Version: 3.0.0-next.40

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.

Accessibility#

  • Slider is fully accessibile on native side using swipe gesture on iOS and volume button on Android.
  • Keyboard accessibility on web is still in-progress.