Slider thumb jumps on initial render.

[owaiswiz]

https://github.com/alantoa/react-native-awesome-slider/blob/main/src/slide.tsx#L301

clamp is called with

• value is progressToValue(progress.value) (assume it's 0),
• lowerBound is 0,
• upperBound is width.value - thumbWidth.

Assume thumbWidth is the default (e.g 14). width.value is updated in the onLayout callback. So it's 0 from the initial render until onLayout is called.

Thus clamp() will be called with clamp(0,0, 0 - 14) => clamp(0,0,-14), which returns -14. So the thumb initially uses translateX: -14 and renders outside the left edge bound for the first few renders until width.value becomes available

Easiest/safe solution here would be to just change the third argument of the clamp fn from width.value - thumbWidth to Math.max(0, width.value - thumbWidth) or width.value ? width.value - thumbWidth : 0

Or alternatively return lower bound if lowerBound > upperBound in the clamp function, however I am not sure if that'll break other things which rely on the opposite behavior.

I don't notice it on my iPhone but can notice on my Android phone.

---

BTW This is a pretty great library. Thanks for your work on this! 🙏🏼

[alantoa]

Hi, @owaiswiz! Thanks for you found this issue! I've been busy lately, I'll look into it later! If you're interested in this lib, commit a PR for this and I'll review it, I will be very grateful!

[owaiswiz]

@alantoa Thank you. I created https://github.com/alantoa/react-native-awesome-slider/pull/18

[alantoa]

hey, @owaiswiz! thank you! release in v2.0.7!