Version: 3.0.0-next.36

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#

Basic#

Color#

Value#

Size#

Customised#

Form Controlled#

Props#

Slider#

NameTypeDescriptionDefault
valuenumberThe value of the slider in controlled mode-
defaultValuenumberThe initial value of the slider in uncontrolled mode-
minnumberThe minimum allowed value of the slider. Cannot be greater than max.0
maxnumberThe maximum allowed value of the slider. Cannot be less than min.100
stepnumberThe step in which increments/decrements have to be made-
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").default
sizelg, md, smThe size (width and height) of the slider.md
idstringThe base id to use for the slider and its components-
isDisabledbooleanIf true, the slider will be disabled-
isReadOnlybooleanIf true, the slider will be in read-only state
isReversedbooleanIf true, the value will be incremented or decremented in reverse.
iconJSX.ElementIf given, will use this icon instead of the default.-
isInvalidbooleanIf true, the checkbox is marked as invalid. Changes style of unchecked state.-
onChangefunctionfunction gets called whenever the slider handle is being dragged or clicked-
onChangeEndfunctionfunction gets called whenever the user stops dragging the slider handle.-
aria-labelstringThe static string to use used for aria-label if no visible label is used.-
aria-labelledbystringThe static string aria-labelledby that points to the ID of the element that serves as label for the slider-
aria-valuetextstringThe static string to use used for aria-valuetext-
orientationhorizontal, verticalSets the orientation of the slider.horizontal

Children components#

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