Slider
Sliders allow users to select a value from a fixed set of options.
![Slider](/react-native-elements/img/slider_screenshot.png)
This component is a forked implementation of react-native-slider.
#
Usageimport { Slider } from 'react-native-elements';
<View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}> <Slider value={this.state.value} onValueChange={(value) => this.setState({ value })} /> <Text>Value: {this.state.value}</Text></View>;
#
PropsanimateTransitions
animationConfig
animationType
debugTouchArea
disabled
maximumTrackTintColor
maximumValue
minimumTrackTintColor
minimumValue
onSlidingComplete
onSlidingStart
onValueChange
orientation
step
style
thumbStyle
thumbTintColor
thumbTouchSize
trackStyle
value
#
ReferenceanimateTransitions
#
Set to true if you want to use the default 'spring' animation
Type | Default | Optional |
---|---|---|
bool | false | Yes |
animationConfig
#
Used to configure the animation parameters. These are the same parameters in the Animated library.
Type | Default | Optional |
---|---|---|
object | undefined | Yes |
animationType
#
Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.
Type | Default | Optional |
---|---|---|
string | 'timing' | Yes |
debugTouchArea
#
Set this to true to visually see the thumb touch rect in green.
Type | Default | Optional |
---|---|---|
bool | false | Yes |
disabled
#
If true the user won't be able to move the slider
Type | Default | Optional |
---|---|---|
bool | false | Yes |
maximumTrackTintColor
#
The color used for the track to the right of the button
Type | Default | Optional |
---|---|---|
string | '#b3b3b3' | Yes |
maximumValue
#
Initial maximum value of the slider
Type | Default | Optional |
---|---|---|
number | 1 | Yes |
minimumTrackTintColor
#
The color used for the track to the left of the button
Type | Default | Optional |
---|---|---|
string | '#3f3f3f' | Yes |
minimumValue
#
Initial minimum value of the slider
Type | Default | Optional |
---|---|---|
number | 0 | Yes |
onSlidingComplete
#
Callback called when the user finishes changing the value (e.g. when the slider is released)
Type | Default | Optional |
---|---|---|
function | Yes |
onSlidingStart
#
Callback called when the user starts changing the value (e.g. when the slider is pressed)
Type | Default | Optional |
---|---|---|
function | Yes |
onValueChange
#
Callback continuously called while the user is dragging the slider
Type | Default | Optional |
---|---|---|
function | Yes |
orientation
#
Set the orientation of the slider.
Type | Default | Optional |
---|---|---|
string | 'horizontal' | Yes |
step
#
Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
Type | Default | Optional |
---|---|---|
number | 0 | Yes |
style
#
The style applied to the slider container
Type | Default | Optional |
---|---|---|
style | Yes |
thumbStyle
#
The style applied to the thumb
Type | Default | Optional |
---|---|---|
style | Yes |
thumbTintColor
#
The color used for the thumb
Type | Default | Optional |
---|---|---|
string | '#343434' | Yes |
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 | Optional |
---|---|---|
object | {width: 40, height: 40} | Yes |
trackStyle
#
The style applied to the track
Type | Default | Optional |
---|---|---|
style | Yes |
value
#
Initial value of the slider
Type | Default | Optional |
---|---|---|
number | 0 | Yes |