minMarkerOverlapStepDistance doesn't work

[FoxyGirl]

• I have searched existing issues
• I am using the latest multi slider version

Thank you a lot for your amazing multi-slider.
I use the latest multi slider version "@ptomasroos/react-native-multi-slider": "^2.2.2",
but unfortunately minMarkerOverlapStepDistance doesn't work

Steps to Reproduce

I have an example in Codesandbox

Expected Behavior

Multi slider has allowOverlap={false} and minMarkerOverlapStepDistance={40}.
Expected to have value which determines the closest two markers can come to each other (in steps, not pixels) equals 40 steps

Actual Behavior

But actually the markers overlap up to 1 step.

[Harsh2110mishra]

• I have searched existing issues
• I am using the latest multi slider version

Thank you a lot for your amazing multi-slider.
I use the latest multi slider version "@ptomasroos/react-native-multi-slider": "^2.2.2",
but unfortunately minMarkerOverlapStepDistance doesn't work

Steps to Reproduce

I have an example in Codesandbox

Expected Behavior

Multi slider has allowOverlap={false} and minMarkerOverlapStepDistance={40}.
Expected to have value which determines the closest two markers can come to each other (in steps, not pixels) equals 40 steps

Actual Behavior

But actually the markers overlap up to 1 step.

Hey, Can you please help me to take the values and setState of the first cursor and second cursor values? I am not able to take values in the class-based components.

Here is my code, Can you please help to solve this issue. I want to take the first cursor value and setState and then the same for the second one.

<MultiSlider
                            values={
                              ([this.state.rangeLow], [this.state.rangeHigh])
                            }
                            //isMarkersSeparated={true}
                            customMarker={CustomMarker}
                            onValuesChange={(values) => {
                              this.setState({
                                rangeLow: values,
                                rangeHigh: values,
                              });
                            }}
                            min={0}
                            max={500}
                            step={1}
                            snapped
                            showSteps={true}
                            trackStyle={{
                              height: 5,
                              borderRadius: 8,
                            }}
                            onToggleOne={(value) => {
                              this.setState({ rangeLow: value });
                            }}
                            onToggleTwo={(value) => {
                              this.setState({ rangeHigh: value });
                            }}
                          />

I am not able to take values separately and also only one cursor is showing

How can I do this thing?

[KrushnaNaghate]

I tried a lot of things, AFTER 2 Hours I got a solution dear, onToggle is not working In my case so here is the code,
so just use onvaluefinish you get value in an array of two elements use them,
if you are not getting two cursor use values={[0,100]} ,

<MultiSlider
// ...
onValuesChangeFinish={value =>
this.setState({min: value[0],slidevalue:value[1]},()=>{console.log(value);})
}
min={0}
max={100}
// onToggleOne={value =>
// this.setState({min: value},()=>{console.log(this.state.min)})
// }
// onToggleTwo={value =>
// this.setState({slidevalue: value},()=>{console.log(this.state.slidevalue)})
// }
//onToggleOne={() => alert('check one')}
//onToggleTwo={() => alert('check two')}
//valuePrefix={'₹'}
values={[0,100]}
sliderLength={width / 1.5}
// enabledOne={true}
enableLabel={true}
enabledTwo={true}
isMarkersSeparated={true}
// imageBackgroundSource={truck}
markerOffsetX={0}
// markerOffsetY={100}
markerSize={{height: 20, width: 22}}
// customMarkerLeft={(e) => ({e.currentValue.toString()})} customMarkerRight={(e) => console.log(e)}
//minMarkerOverlapDistance={3}
/>