onValuesChangeFinish() makes slider to stop after one date

[asjustis]

I try to implement a multi-slider with two values. It worked fine until I wanted to process and update values after the change.

I started using onValuesChangeFinish(), tried the onValuesChange() as well. If I set these functions and keep them empty, it works. If I start to change my own variable (not used in the slider) as in setPeakStartDate(addDays(minDate, values[0])); it starts to jump back to the initial position after I release the slider. Tried setting the values manually through peakSliderValues variable, but it didn't help as well. Am I missing something?

<MultiSlider
          containerStyle={{ paddingHorizontal: 16, backgroundColor: 'red' }}
          sliderLength={width - 32} //minus the 2 * padding
          snapped
          step={1}
          min={0}
          max={steps}
          enabledOne={true}
          enabledTwo={true}
          enableLabel={true}
          smoothSnapped={true}
          customLabel={props => <SliderLabel startDate={minDate} {...props} />}

          /* HERE THE FUN BEGINS */
          
          //values={[peakSliderValues[0], peakSliderValues[1]]}
          values={[0, 10]}
          // onValuesChange={values => {
          //   setPeakSliderValues(values);
          //   setPeakStartDate(addDays(minDate, values[0]));
          //   setPeakEndDate(addDays(minDate, values[1]));
          // }}

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

Thanks

[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?