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.
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;