Display value of slider with respect to slider thumb react native
You can adjust left of the text to the value of the slider.
const left = this.state.value * (screenWidth-60)/100 - 15;
<Text style={ { width: 50, textAlign: 'center', left: left } }>
{Math.floor( this.state.value )}
</Text>
<Slider maximumValue={100}
value={this.state.value}
onValueChange={value => this.setState({ value })} />
Solution to your problem:
constructor(props){
super(props)
this.state = {
distance: 30,
minDistance: 10,
maxDistance: 100
}
}
render() {
return (
<View style={styles.container}>
<Slider
style={{ width: 300}}
step={1}
minimumValue={this.state.minDistance}
maximumValue={this.state.maxDistance}
value={this.state.distance}
onValueChange={val => this.setState({ distance: val })}
thumbTintColor='rgb(252, 228, 149)'
maximumTrackTintColor='#d3d3d3'
minimumTrackTintColor='rgb(252, 228, 149)'
/>
<View style={styles.textCon}>
<Text style={styles.colorGrey}>{this.state.minDistance} km</Text>
<Text style={styles.colorYellow}>
{this.state.distance + 'km'}
</Text>
<Text style={styles.colorGrey}>{this.state.maxDistance} km</Text>
</View>
</View>
);
}
}
Styles:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
textCon: {
width: 320,
flexDirection: 'row',
justifyContent: 'space-between'
},
colorGrey: {
color: '#d3d3d3'
},
colorYellow: {
color: 'rgb(252, 228, 149)'
}
});
Output:
Working Snippet: https://snack.expo.io/Syrt3Bs7z