$ npm install react-native-custom-slider-fixed --save
$ react-native link react-native-custom-slider-fixed
import React, { useState } from "react"
import { View } from "react-native"
import Slider from 'react-native-custom-slider-fixed';
const SliderApp = props => {
const [value, setValue] = useState(15);
return (
<Slider
value={value}
minimumValue={0}
maximumValue={50}
onValueChange={(value) => setValue(value)}
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'
}}
/>
}
/>
)
}
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