React Native Vertical Slider library

I’m trying to use the “React Native Vertical Slider” library (https://github.com/sacmii/rn-vertical-slider/blob/master/README.md) and I am having problems understanding how to use the “onChange” and “onComplete” properties:

onChange={(value: number) => {
  console.log("CHANGE", value);
}}

onComplete={(value: number) => {
  console.log("COMPLETE", value);
}} 

I want to change a variable to the value of the slider but I’m not sure how to do that, I get errors because of the “number” keyword.

Answer

Here’s a nice example to get you going (please bear in mind that there are a few issues with rn-vertical-slider, like the ball value not updating. You might like to try react-native-smooth-slider instead):

import {View, Text, StyleSheet} from 'react-native';
import VerticalSlider from 'rn-vertical-slider';

const STARTING_VALUE = 1;

const App = () => {
  const [sliderValue, setSliderValue] = useState(STARTING_VALUE);
  const [completeValue, setCompleteValue] = useState(STARTING_VALUE);

  return (
    <View style={styles.container}>
      <VerticalSlider
        value={sliderValue}
        disabled={false}
        min={0}
        max={100}
        onChange={value => {
          console.log('CHANGE', value);
          setSliderValue(value);
        }}
        onComplete={value => {
          console.log('COMPLETE', value);
          setCompleteValue(value);
        }}
        width={50}
        height={300}
        step={1}
        borderRadius={5}
        minimumTrackTintColor={'gray'}
        maximumTrackTintColor={'tomato'}
        showBallIndicator
        ballIndicatorColor={'gray'}
        ballIndicatorTextColor={'white'}
      />
      <Text>Complete value = {completeValue}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;