Skip to main content
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