How to move label along with slider value in React Native

Question

I am working on a React Native Project, I want to move the label along with the slider value. I tried many ways but its not working accurately. Here is my code:

import React, { useState } from 'react'
import { Text, StyleSheet, View, Dimensions } from 'react-native'
import Slider from '@react-native-community/slider';



function LabelSlider() {
    const windowWidth = Dimensions.get('window').width;

    const [value, setValue] = useState(0)

    



   // const left = value * (windowWidth-60)/85;

    const [showValue, setShowValue] = useState(false)


    //var percent = (percentToGet / 100) * number;
    return (
        <View>
            {showValue ?
                <View >
                    <Text style={{ width:50, textAlign: 'auto', left:  value}}>{value}</Text>
                </View> :

                <></>}
            <Slider
                style={{ width: 200, height: 40 }}
                maximumValue={300}
                minimumValue={0}
                step={1}
                value={value}
                onValueChange={(value) => setValue(value)}
                onSlidingStart={() => setShowValue(true)}
                onSlidingComplete={() => setShowValue(true)}
                minimumTrackTintColor="#FFFFFF"
                maximumTrackTintColor="#000000"
            />
        </View>
    )
}

export { LabelSlider }

I have also attached two images of the output I was able to get: Image 1 , Image 2

Answer 1

You can use a shared value and interpolate the left position for the label. Right now what happens is, that the left value goes from 0 to 300. This makes the label unresponsive. You can do something as shown below.

Also, here's a Snack for the implementation.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Slider from '@react-native-community/slider';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated';

// Constants
const MAX_SLIDER_VALUE = 300;
const MIN_SLIDER_VALUE = 0;
const SLIDER_WIDTH = 200;

export default function App() {
  // State to store progress value of slider
  const [value, setValue] = React.useState(0);

  // Shared value for storing label position
  const progress = useSharedValue(0);

  // Whenever `value` changes, update the progress shared value
  // This will accordingly update the left position of the label
  React.useEffect(() => {
    progress.value = value;
  }, [value]);

  // Animate the left position according to the shared value
  // Also Extrapolate it so that it doesn't exceed 100%
  const animatedStyle = useAnimatedStyle(() => {
    const leftPosition = interpolate(
      progress.value,
      [MIN_SLIDER_VALUE, MAX_SLIDER_VALUE],
      [0, 100],
      Extrapolate.CLAMP
    );

    return {
      left: `${leftPosition}%`,
    };
  });

  return (
    <View style={styles.container}>
      <View style={{ width: SLIDER_WIDTH }}>
        <Animated.View style={[styles.labelView, animatedStyle]}>
          <Text>{value}</Text>
        </Animated.View>

        <Slider
          style={{ width: SLIDER_WIDTH, height: 40 }}
          maximumValue={MAX_SLIDER_VALUE}
          minimumValue={MIN_SLIDER_VALUE}
          step={1}
          value={value}
          onValueChange={setValue}
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  labelView: {
    marginBottom: 20,
  },
});

Answer 2

You can use react native element slider for this, I have given the example code below

import React from 'react';
import { View } from 'react-native';
import {Slider} from 'react-native-elements'; 

const App = () => {
return (
<View
  style={{
    flex: 1,
    justifyContent: "center",
  }}>
  <Slider
    thumbStyle={{height: 15, width: 15, backgroundColor: 'orange'}}
    maximumTrackTintColor="grey"
    minimumTrackTintColor="orange"
    thumbProps={{
      children: (
        <View
          style={{
            color: 'green',
            marginTop: -22,
            width: 100,
          }}>
          <Text>Value</Text>
        </View>
      ),
    }}
/>
 </View>
 )
}

export default App;