Skip to main content
Version: Bleeding Edge 🚧

Slider

Sliders allow users to select a value from a fixed set of values using drag utility.

Import

import { Slider } from "@rneui/themed";

Usage

Props

NameTypeDefaultDescription
allowTouchTrackbooleanfalseIf true, thumb will respond and jump to any touch along the track.
animateTransitionsbooleanSet to true if you want to use the default 'spring' animation.
animationConfigTimingAnimationConfig | SpringAnimationConfigUsed to configure the animation parameters. These are the same parameters in the Animated library.
animationTypespring | timingtimingSet to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.
containerStyleStyleApply style to the container of the slider.
debugTouchAreabooleanfalseSet this to true to visually see the thumb touch rect in green.
disabledbooleanIf true the user won't be able to move the slider.
maximumTrackTintColorstring#b3b3b3The color used for the track to the right of the button.
maximumValuenumber1Initial maximum value of the slider.
minimumTrackTintColorstring#3f3f3fThe color used for the track to the left of the button.
minimumValuenumber0Initial minimum value of the slider.
onSlidingComplete(value: number) => voidCallback called when the user finishes changing the value (e.g. when the slider is released).
onSlidingStart(value: number) => voidCallback called when the user starts changing the value (e.g. when the slider is pressed).
onValueChange(value: number) => voidCallback continuously called while the user is dragging the slider.
orientationvertical | horizontalhorizontalSet the orientation of the slider.
stepnumber0Step value of the slider. The value should be between 0 and maximumValue - minimumValue).
styleView StyleThe style applied to the slider container.
thumbPropsanyThe props applied to the thumb. Uses Component prop which can accept Animated components.
thumbStyleView StyleThe style applied to the thumb.
thumbTintColorstringredThe color used for the thumb.
thumbTouchSizeSizable{ width: THUMB_SIZE, height: THUMB_SIZE }The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
trackStyleView StyleThe style applied to the track.
valuenumber0Initial value of the slider.

Playground

Loading...