onValuesChangeFinish() makes slider to stop after one date

[asjustis]

onValuesChangeFinish() makes slider to stop after one date

[asjustis]

Classic. Just after writing down the issue, I found the right combination. I would expect onValuesChangeFinish() could let just do the side-effect action without changing any values behavior internally, but oh well, this will do afterall:

<MultiSlider
          ...
          values={[peakSliderValues[0], peakSliderValues[1]]}

          onValuesChangeFinish={values => {
            setPeakSliderValues(values);
            setPeakStartDate(addDays(minDate, values[0]));
            setPeakEndDate(addDays(minDate, values[1]));
          }}

Cheers

[asjustis]

Hm, reopening the issue, seems there is something weird indeed.

const [sliderValues, setSliderValues] = useState([0, 10]);
  
useEffect(() => {
    //debugger;
    setSliderValues(values);
  }, values);

const updateValues = values => {
    //debugger;
    props.onValueChanged(values); // Comes from parent component as param (posting below)
  };

<MultiSlider
        containerStyle={{ paddingHorizontal: 16 }}
        selectedStyle={{ backgroundColor: theme.colors.primary }}
        trackStyle={{ backgroundColor: theme.colors.secondary }}
        sliderLength={width - 32} //minus the 2 * padding
        values={[sliderValues[0], sliderValues[1]]}
        snapped
        step={1}
        min={0}
        max={steps}
        enabledOne={true}
        enabledTwo={true}
        enableLabel={true}
        //smoothSnapped={true}
        customLabel={props => (
          <SliderLabel
            startDate={initialDate}
            labelOne={'Peak starts on'}
            labelTwo={'Peak ends on'}
            {...props}
          />
        )}
        //onValuesChangeFinish={onValueChanged}
        onValuesChangeFinish={values => {
          setSliderValues(values);
          updateValues(values);
          console.log('vlaues', values);
        }}
      />

And this is called from:

<Slider
        // other props ...
        onValueChanged={values => {
          setPeakStartDate(addDays(dateCompStart, values[0])); // just React.useState() setters
          setPeakEndDate(addDays(dateCompStart, values[1]));
        }}
      />

If I comment out updateValues(values); method, the slider works ok. If I keep it uncommented, the sliders are reset back to initial position after releasing the finger.

Any advice?