Slider doesn't match up with where the mouse is dragging on web

[Powersource]

Environment

Happens on several operating systems. All running inside electron.

Description

Here are two issue reports that I think are related to this

https://gitlab.com/staltz/manyverse/-/issues/1646

drag on sliders in setting page and move it to the left, but it goes to the right.

https://gitlab.com/staltz/manyverse/-/issues/1661

The slider bars in the settings page don't function as expected if I'm zoomed-in (I generally like text to be larger than the default). Specifically, the circle which marks the selected point on the bar is actually in a different place when zoomed. Not a major issue but I figured I'd mention it.

I suspect that this second issue is the same as the first, and that the user just didn't test it unzoomed.

Reproducible Demo

Happens in production for us https://gitlab.com/staltz/manyverse You can download here but I'll try to create a smaller reproduction https://www.manyver.se/download/ Here's the file where we use the component https://gitlab.com/staltz/manyverse/-/blob/master/src/frontend/screens/settings/view/SliderSetting.ts

[Powersource]

I found a fix, slightly hacky though lol https://gitlab.com/staltz/manyverse/-/merge_requests/265/diffs

[muni127]

I am currently hacking my way around this by dispatching a window resize event on mount (with some delay).

Seems like it's not always picking up the correct container size without this.

[jspizziri]

@muni127 @Powersource , I'm working on getting web functional in the most recent version. I haven't tested this issue or in electron contexts. If you could test out my PR that could be helpful.

https://github.com/callstack/react-native-slider/pull/462

[jspizziri]

@BartoszKlonowski I'm not seeing this in my PR, I'd say that this is fixed by it unless there's more feedback from the people who have chimed in here.