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