Version: 3.4.2

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';
import { Animated } from 'react-native';
<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>;
// Replace Thumb with custom image
<View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
<Slider
value={this.state.value}
onValueChange={(value) => this.setState({ value })}
thumbStyle={{ height: 40, width: 40, backgroundColor: 'transparent' }}
thumbProps={{
Component: Animated.Image,
source: {
uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
},
}}
/>
<Text>Value: {this.state.value}</Text>
</View>;
// Set Custom Children inside thumb
<View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
<Slider
value={value}
onValueChange={setValue}
maximumValue={50}
minimumValue={20}
step={1}
trackStyle={{ height: 10, backgroundColor: 'transparent' }}
thumbStyle={{ height: 20, width: 20, backgroundColor: 'transparent' }}
thumbProps={{
children: (
<Icon
name="heartbeat"
type="font-awesome"
size={20}
reverse
containerStyle={{ bottom: 20, right: 20 }}
color="#f50"
/>
),
}}
/>
<Text>Value: {this.state.value}</Text>
</View>;

Props#


Reference#

allowTouchTrack#

If true, thumb will respond and jump to any touch along the track.

TypeDefaultOptional
booleanfalseYes

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

thumbProps#

The props applied to the thumb. Uses Component prop which can accept Animated components.

TypeDefaultOptional
objectYes

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