RangeSlider not working properly

[eran-pinhas]

Summary

RangeSlider seems to incorrectly locate the cursor's position

Extra info:

• Was able to reproduce on my project
• In my project it seems to occur on the built version (ie vite build) but not on dev environment (vite)
• MacOS Sonoma 14.3.1
• Browser: Chrome 126.0.6478.183

Expected behavior

Dragging the min/max circles should match the cursor location

Actual behavior

• There is a shift between the cursor and the range selector when trying to click or drag
• In some cases the browser seems to drag something else (maybe some sort of overlay?). This one happened only once when recording the screen but could not reproduce after.

Steps to reproduce

1. Go to documentation page:
2. Go to first example
3. Add Money Spent filter
4. Try to move the min or max selectors

Are you using React components?

Yes

Polaris version number

12.25.0

Browser

Chrome 126.0.6478.183

Device

MacOS 14.3.1

[eran-pinhas]

If anyone encounter the same issue, this is how we solved solved it 👇 . Not ideal, but what you're gonna do

setTimeout(() => {
  const event = new Event('resize');
  window.dispatchEvent(event);
}, 100);

[goldenpine]

You saved my day! Thank you @eran-pinhas I used that code snip but without setting the timeout.

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[eran-pinhas]

It is still relevant