Horizontally aligned sliders overlap

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

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?

[notscottsmith]

I figured out (what looks like) a solution - which only came to me after a good night's sleep 😄

I just raised the z-index of the surrounding

on the container for the slider on the left, bringing the handle to the forefront.

I've no idea if that solution will continue to work once this is in production but it works so far in testing, so it might help someone else.