react-native-custom-slider
Getting started
$ npm install react-native-custom-slider --save
Mostly automatic installation
$ react-native link react-native-custom-slider
Usage
; const SliderApp = { const value setValue = ; return <Slider value=value minimumValue=0 maximumValue=50 onValueChange= thumbStyle= justifyContent: 'center' alignItems: 'center' width: 25 customThumb= <View style= width: 35 height: 20 overflow: 'hidden' borderTopLeftRadius: 10 borderTopRightRadius: 10 borderBottomLeftRadius: 10 borderBottomRightRadius: 10 backgroundColor: 'gold' /> /> }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
value | number | Yes | 0 | Initial value of the slider |
disabled | bool | Yes | false | If true the user won't be able to move the slider |
minimumValue | number | Yes | 0 | Initial minimum value of the slider |
customMinimumTrack | number | Yes | 1 | Initial maximum value of the slider |
step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue) |
minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button |
customMinimumTrack | component | Yes | Sets an custom component used for the track to the left of the button. | |
maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button |
customMaximumTrack | component | Yes | Sets an custom component used for the track to the right of the button. | |
thumbTintColor | string | Yes | '#343434' | The color used for the thumb |
thumbTouchSize | object | Yes | {width: 40, height: 40} |
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. |
onValueChange | function | Yes | Callback continuously called while the user is dragging the slider | |
onSlidingStart | function | Yes | Callback called when the user starts changing the value (e.g. when the slider is pressed) | |
onSlidingComplete | function | Yes | Callback called when the user finishes changing the value (e.g. when the slider is released) | |
style | style | Yes | The style applied to the slider container | |
trackStyle | style | Yes | The style applied to the track | |
thumbStyle | style | Yes | The style applied to the thumb | |
customThumb | component | Yes | Sets an custom component for the thumb. | |
debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green. |
animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation |
animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties. |
animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the Animated library. |
MIT Licensed