noUi Slider - Mask Border Radius Disappears

[bryanguillen]

Issue Description

Hello, as the title says, the mask radius seems to disappear for our given implementation; specifically, the closer to 0 we move the handle, the more the mask border radius looks like 0, but the further from zero, the more the radius is rendered as expected (e.g. 5px).

Here is a link to the codepen where I was able to reproduce the issue. There, you will be able to see a simple example of what our production code looks like. And more importantly, you will see the issue, which again, you can reproduce by moving the slider handle up and down (notice the mask's bottom border radius disappear the closer you get to 0).

Hint: We think it has to do with the transform being applied to noUi-connect element.

What We've Tried

• Psuedo-element: We have tried adding a psuedo-element, but run into the same issue.
• Updating width of noUi-connects: We set the width of the mask's container to the same width as mask and applied the border to said container. It works; however, we have a requirement where noUi-connects needs to be larger (i.e. 40px), so that doesn't work.

Additional Notes

• noUi Version: 14.6.0
• Browsers: Chrome, Firefox, Edge
• Came across this GitHub issue, but I don't think it is relevant

Look forward to hearing from you and thank you in advance!

[leongersen]

Thanks for your clear question. Applying a border-radius to the .noUi-connect element will not work, as these elements are (as you hinted to) transformed to fit the slider. This allows all elements in noUiSlider to be positioned using transforms, so moving a handle can be done entirely without the browser having to reflow any elements (and thus be high performance, even on slow mobile devices).

A workaround for your situation is to invert your styling. Apply the gray background and border radius to .noUi-target (or .slider in your example), set the connect option to upper, and style .noUi-connect with a white background.

[bryanguillen]

@leongersen,

• No problem; thank you for maintaining this awesome package. We love it!
• Also, thanks for both the explanation and workaround; they both make sense. We will try that out on Monday!

Best

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.