I want to move the label with respect to slider thumb just like this one:
Right now my slider is like this:
I want to display the label shown as 30 km with respect to the slider thumb such that as the slider moves, the label should move accordingly.
I am using Native React Slider component.
this is my code:
JavaScript
x
9
1
<Slider
2
style={styles.slider}
3
thumbTintColor='rgb(252, 228, 149)'
4
step={1}
5
maximumValue={5}
6
thumbTintColor='rgb(252, 228, 149)'
7
maximumTrackTintColor='#494A48'
8
minimumTrackTintColor='rgb(252, 228, 149)' />
9
Advertisement
Answer
Solution to your problem:
JavaScript
1
36
36
1
constructor(props){
2
super(props)
3
this.state = {
4
distance: 30,
5
minDistance: 10,
6
maxDistance: 100
7
}
8
}
9
10
11
render() {
12
return (
13
<View style={styles.container}>
14
<Slider
15
style={{ width: 300}}
16
step={1}
17
minimumValue={this.state.minDistance}
18
maximumValue={this.state.maxDistance}
19
value={this.state.distance}
20
onValueChange={val => this.setState({ distance: val })}
21
thumbTintColor='rgb(252, 228, 149)'
22
maximumTrackTintColor='#d3d3d3'
23
minimumTrackTintColor='rgb(252, 228, 149)'
24
/>
25
<View style={styles.textCon}>
26
<Text style={styles.colorGrey}>{this.state.minDistance} km</Text>
27
<Text style={styles.colorYellow}>
28
{this.state.distance + 'km'}
29
</Text>
30
<Text style={styles.colorGrey}>{this.state.maxDistance} km</Text>
31
</View>
32
</View>
33
);
34
}
35
}
36
Styles:
JavaScript
1
20
20
1
const styles = StyleSheet.create({
2
container: {
3
flex: 1,
4
justifyContent: 'center',
5
alignItems: 'center',
6
backgroundColor: '#000',
7
},
8
textCon: {
9
width: 320,
10
flexDirection: 'row',
11
justifyContent: 'space-between'
12
},
13
colorGrey: {
14
color: '#d3d3d3'
15
},
16
colorYellow: {
17
color: 'rgb(252, 228, 149)'
18
}
19
});
20
Output:
Working Snippet: https://snack.expo.io/Syrt3Bs7z