I am using noUiSlider for a project where I have multiple sliders on top of another. I noticed that the HTML elements lose interactivity if there is a slider on top of it and after a lot of digging I realised it's because the pips element overlaps with the slider below it.
I tried a bunch of CSS commands to change the z-index (after setting position to something non-static) but none of them worked. I also tried changing the height of the slider to compress it (including with !important), but all of those seem to get overwritten by the libraries' code.
I have temporarily added 5 <br> which seems to have worked, but since I have many sliders the section now takes up too much space which is why I was hoping to find a different work around.
I suspect the noUi-pips noUi-pips-horizontal class to be the main culprit but none of my CSS tags targeting that seem to be able to override the height. Any help/insight is appreciated!
Use pointer-events, namely:
.noUi-pips {
pointer-events: none;
}