react-native-MultiSlider
A track with multiple thumbs based on react-native.
ScreenShot
Usage
npm install react-native-MultiSlider --save
import MultiSlider from 'react-native-MultiSlider';...class test extends Component { constructor(props) { super(props); this.state = { leftValue: 0, rightValue: 0.5, }; } render() { return ( <View style = {{flex: 1, backgroundColor: 'white'}}> <View style = {styles.container}> <MultiSlider trackWidth = {300} defaultTrackColor = {'#e3e3e3'} leftThumbColor = {'red'} rightThumbColor = {'blue'} rangeColor = {'pink'} leftValue = {this.state.leftValue} rightValue = {this.state.rightValue} onLeftValueChange = {(leftValue) => this.setState({leftValue})} onRightValueChange = {(rightValue) => this.setState({rightValue})} /> </View> <TouchableOpacity onPress = {() => this.onPress(true)}> <View style = {styles.button}> <Text>Click to disable</Text> </View> </TouchableOpacity> <TouchableOpacity onPress = {() => this.onPress(false)}> <View style = {styles.button}> <Text>Click to able</Text> </View> </TouchableOpacity> </View> ); }}...
Thanks
react-native-slider by jeanregisser