Closed bryanguillen closed 3 years ago
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) transform
ed 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.
@leongersen,
Best
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.
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 tonoUi-connect
element.What We've Tried
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 wherenoUi-connects
needs to be larger (i.e.40px
), so that doesn't work.Additional Notes
noUi
Version:14.6.0
Look forward to hearing from you and thank you in advance!