First onChange in a slider greater than the viewport not registering correctly

[luizcieslak]

Hi! I noticed a minor issue in a slider when it is greater than the viewport width documented in this codesandbox.

Steps:

• scroll horizontally the page all until the end
• click in the very end of the slider as you were selecting the ~100 value.
• Instead of jumping to ~100, the slider goes to ~18.
• Repeat steps and then the slider finally goes to ~100.

ssr-2023-10-20_15.10.30.mp4

I haven't found the root cause yet and can update this issue later

[luizcieslak]

after some digging:

react-range/src/Range.tsx

Line 147 in 2a634cd

const trackRect = trackElement.getBoundingClientRect();

inside the onMove function, the trackRect.left above doesn't update its value if you scroll the page before interacting with the range

[ahsan-sabir]

@luizcieslak have you found any workaround?

[luizcieslak]

I haven't @ahsan-sabir 😢