Display value of slider with respect to slider thumb react native

Issue

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:

<Slider 
     style={styles.slider} 
     thumbTintColor='rgb(252, 228, 149)' 
     step={1} 
     maximumValue={5} 
     thumbTintColor='rgb(252, 228, 149)' 
     maximumTrackTintColor='#494A48' 
     minimumTrackTintColor='rgb(252, 228, 149)' />

Solution

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

Answered By - Ahsan Ali