react-native-featured-slider v1.0.7
react-native-featured-slider
Sliders allow users to select a value from a extended set of options.
This component is a forked implementation of react-native-elements.
Usage
import { Slider } from 'react-native-featured-slider';
<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
- Usage
- Props
- Reference
animateTransitions
animationConfig
animationType
debugTouchArea
disabled
maximumTrackTintColor
maximumValue
minimumTrackTintColor
minimumValue
onSlidingComplete
onSlidingStart
onValueChange
orientation
step
style
thumbStyle
thumbTintColor
thumbTouchSize
trackStyle
value
tickMarks
tickMarksColor
backgroundImage
backgroundColor
revert
updateOnPress
thumbOffset
Reference
animateTransitions
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 |
tickMarks
Display tick marks
Type | Default | Optional |
---|---|---|
bool | false | Yes |
tickMarksColor
The color of the tick marks
Type | Default | Optional |
---|---|---|
string | '#000' | Yes |
backgroundImage
The background image
Type | Default | Optional |
---|---|---|
any | null | Yes |
backgroundColor
The background color of the slider (useful if you are working with a background image)
Type | Default | Optional |
---|---|---|
string | '#fff' | Yes |
revert
To revert the slider. Reverts the min/max values
Type | Default | Optional |
---|---|---|
bool | false | Yes |
updateOnPress
To update the value if a position on the slider is pressed
Type | Default | Optional |
---|---|---|
bool | false | Yes |
thumbOffset
Offset of the thumb
Type | Default | Optional |
---|---|---|
number | 0 | Yes |