Version: 1.2.0

Slider

Sliders allow users to select a value from a fixed set of options.

Slider

This component is a forked implementation of react-native-slider.

Usage#

import { 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>;

Props#


Reference#

animateTransitions#

Set to true if you want to use the default 'spring' animation

TypeDefaultOptional
boolfalseYes

animationConfig#

Used to configure the animation parameters. These are the same parameters in the Animated library.

TypeDefaultOptional
objectundefinedYes

animationType#

Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.

TypeDefaultOptional
string'timing'Yes

debugTouchArea#

Set this to true to visually see the thumb touch rect in green.

TypeDefaultOptional
boolfalseYes

disabled#

If true the user won't be able to move the slider

TypeDefaultOptional
boolfalseYes

maximumTrackTintColor#

The color used for the track to the right of the button

TypeDefaultOptional
string'#b3b3b3'Yes

maximumValue#

Initial maximum value of the slider

TypeDefaultOptional
number1Yes

minimumTrackTintColor#

The color used for the track to the left of the button

TypeDefaultOptional
string'#3f3f3f'Yes

minimumValue#

Initial minimum value of the slider

TypeDefaultOptional
number0Yes

onSlidingComplete#

Callback called when the user finishes changing the value (e.g. when the slider is released)

TypeDefaultOptional
functionYes

onSlidingStart#

Callback called when the user starts changing the value (e.g. when the slider is pressed)

TypeDefaultOptional
functionYes

onValueChange#

Callback continuously called while the user is dragging the slider

TypeDefaultOptional
functionYes

orientation#

Set the orientation of the slider.

TypeDefaultOptional
string'horizontal'Yes

step#

Step value of the slider. The value should be between 0 and maximumValue - minimumValue)

TypeDefaultOptional
number0Yes

style#

The style applied to the slider container

TypeDefaultOptional
styleYes

thumbStyle#

The style applied to the thumb

TypeDefaultOptional
styleYes

thumbTintColor#

The color used for the thumb

TypeDefaultOptional
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.

TypeDefaultOptional
object{width: 40, height: 40}Yes

trackStyle#

The style applied to the track

TypeDefaultOptional
styleYes

value#

Initial value of the slider

TypeDefaultOptional
number0Yes