alantoa / react-native-awesome-slider

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
263 stars 30 forks source link

snapToStep doesn't work, the progress bar stays at the same place but the value changes #45

Closed riamon-v closed 1 year ago

riamon-v commented 1 year ago

Hello, I'm having a weird issue, when setting steps to the slider, it keeps staying to the place it's been at originally.

After a few investigations into the library code, I found that the issue is due to this part of the code

Screenshot 2023-09-01 at 16 45 37

For a reason I did not crack yet if you comment the whole "if snappingEnabled" statment, it works as intended. I logged currentWidth, and especially currentIndex but they are always the same, that's where there is the actual problem.

Do you have any idea ?

Here is my code for you to reproduce something similar

  const [value, setValue] = useState(2500);

  return (
    <View style={{flex: 1, padding: 50}}>
      <Text>{value}</Text>
      <SliderInput
        maxValue={3000}
        minValue={0}
        initialValue={value}
        setValue={setValue}
      />
    </View>
  );

SliderInput:

 <Slider
      style={styles.container}
      containerStyle={{borderRadius: 8}}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      renderBubble={() => null}
      onValueChange={value => {
        setValue(Math.round(value));
      }}
      sliderHeight={12}
      renderThumb={() => <View style={styles.knob} />}
      theme={{
        maximumTrackTintColor: mainTheme.colors.lightGrey,
        minimumTrackTintColor: mainTheme.colors.primary,
      }}
      step={6}
      snapToStep={true}
    />

Here is the behavior observed

https://github.com/alantoa/react-native-awesome-slider/assets/19188004/dd90c2a9-b81b-4455-9504-d3870ddf49fd

alantoa commented 1 year ago

Hey, @riamon-v thanks for looking into this. You are right, this code is unnecessary. It was there because I hadn't cleared it up last time. So I just removed it and released a new version here. You can try it again now!

riamon-v commented 1 year ago

Hey, @riamon-v thanks for looking into this. You are right, this code is unnecessary. It was there because I hadn't cleared it up last time. So I just removed it and released a new version here. You can try it again now!

Yep works perfectly ! Thanks :)