Issue with marker position in edges of in range slider

[apedroferreira]

Hey, first of all thank you for creating this library, it works great and is so customizable, it helped me a lot!

The only issue I had is that when you drag a marker to the extremes of the range slider, it actually goes a bit beyond the edges of the bar(especially in iOS).

In either iOS and Android this does not match the default native slider behavior. I think it would be much better if the markers stopped in the edges by being aligned with the edges of the bar, like the native sliders do, since that alignment makes things look a lot better from a design perspective.

Would it be possible to fix this or support this behavior with an additional option or something?

Thanks!

[iddahadev]

Hello 👋, I have the same problem here, the thumb goes beyond the boundaries of the slider. Is there a configuration to follow or is it an unwanted behavior?

Thanks!

[shareef-dweikat]

Just add width to containerStyle <MultiSlider min={0} max={5200} sliderLength={300} values={[1000, 4000]} enabledTwo={true} trackStyle={{backgroundColor: 'red'}} containerStyle={{width: 500}} ..... }} />

[lindboe]

We've been seeing this, and on Android the marker isn't responding to touches on the outer half when on the edges (e.g., the sections where the track doesn't exist). Setting width in containerStyle doesn't seem to change anything. We're on React Native 0.61.5, if that makes a difference.

[TomasSestak]

We've been seeing this, and on Android the marker isn't responding to touches on the outer half when on the edges (e.g., the sections where the track doesn't exist). Setting width in containerStyle doesn't seem to change anything. We're on React Native 0.61.5, if that makes a difference.

Did you solve this issue?

[formaldehydeson]

I'm having this same issue... I pushed the marker in with markerSize prop and that kind of works around it

[Swatee16]

I have solved with below code customLabel={(e) => { let val1 = e.oneMarkerValue; let val2 = e.twoMarkerValue; return <View style{{flex: 1, flexDirection: "row"}}> <Text>{val1}</Text> <View style{{flex: 1}}/> <Text>{val2}</Text> </View> }}

[ojhansson]

I have solved with below code customLabel={(e) => { let val1 = e.oneMarkerValue; let val2 = e.twoMarkerValue; return <View style{{flex: 1, flexDirection: "row"}}> <Text>{val1}</Text> <View style{{flex: 1}}/> <Text>{val2}</Text> </View> }}

Did you paste the wrong part of the code? I don't understand how changing customLabel would fix anything