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

Name	Type	Default	Description
allowTouchTrack	boolean	false	If true, thumb will respond and jump to any touch along the track.
animateTransitions	boolean		Set to true if you want to use the default 'spring' animation.
animationConfig	TimingAnimationConfig or SpringAnimationConfig		Used to configure the animation parameters. These are the same parameters in the Animated library.
animationType	spring or timing	timing	Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.
containerStyle	Style		Apply style to the container of the slider.
debugTouchArea	boolean	false	Set this to true to visually see the thumb touch rect in green.
disabled	boolean		If true the user won't be able to move the slider.
maximumTrackTintColor	string	#b3b3b3	The color used for the track to the right of the button.
maximumValue	number	1	Initial maximum value of the slider.
minimumTrackTintColor	string	#3f3f3f	The color used for the track to the left of the button.
minimumValue	number	0	Initial minimum value of the slider.
onSlidingComplete	(value: number) => void		Callback called when the user finishes changing the value (e.g. when the slider is released).
onSlidingStart	(value: number) => void		Callback called when the user starts changing the value (e.g. when the slider is pressed).
onValueChange	(value: number) => void		Callback continuously called while the user is dragging the slider.
orientation	vertical or horizontal	horizontal	Set the orientation of the slider.
step	number	0	Step value of the slider. The value should be between 0 and maximumValue - minimumValue).
style	View Style		The style applied to the slider container.
thumbProps	any		The props applied to the thumb. Uses Component prop which can accept Animated components.
thumbStyle	View Style		The style applied to the thumb.
thumbTintColor	string	red	The color used for the thumb.
thumbTouchSize	Sizable	{ 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.
trackStyle	View Style		The style applied to the track.
value	number	0	Initial value of the slider.

Playground

Loading...