Skip to content

Horizontally aligned sliders overlap #1300

@notscottsmith

Description

@notscottsmith

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).

Image

Image

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions