-
-
Notifications
You must be signed in to change notification settings - Fork 661
Open
Description
I'm trying to implement multiple sliders aligned next to each other - except the noUi-origin class for the lower handle of the right slider overlaps with the upper handle of the left slider, meaning that only the upper and lower sections of the handle are able to be clicked on by the user - if they click in the middle of the upper handle of the left slider, it resets the right slider back to 0 (the lowest range).
The second image shows how the no-Ui-origin component sits over the top of the handle.
<div class="noUi-origin" style="transform: translate(-100%); z-index: 5;">
<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="1000000.0" aria-valuenow="0.0" aria-valuetext="0">
<div class="noUi-touch-area">
</div>
</div>
</div>
How can I affect the styling of this so that they don't interact? Or, do I need to just keep them one per row?
Metadata
Metadata
Assignees
Labels
No labels