Hide a knob [feature]

It would be nice to have a new feature to hide both (or desired) knob BUT NOT THE TOOLTIP (like for the disabled functions) :

// To disable
slider.setAttribute('hideHandle', true);

// To re-enable
slider.removeAttribute('hideHandle');

// To disable one handle
var origins = slider.getElementsByClassName('noUi-origin');
origins[0].setAttribute('hideHandle', true);

Why ? Because sometimes it’s nice to use the slider functionality (animation, tooltips…) without showing the knob. Typically I disabled the knob but I want it becomes hidden too.

Alternatively I’m “patching” css to have the tooltip above the disabled knob. It’s not very elegant but it works in my case :

slider.setAttribute("disabled", true);
$(this).find(".noUi-handle-upper .noUi-tooltip").css("z-index", "1000");    // place over to hide the knob
$(this).find(".noUi-tooltip").css("top", -4);   // recenter on slider

[jt196]

Sorry to drudge this up again 7 years later. @leongersen’s solution works well, there was some shadows remaining.

[disabled] .noUi-handle { background: none; border: none; box-shadow: none; } seems to work, though I guess [disabled] .noUi-handle { display: none } should also work pretty well.

EDIT - I settled with display: none as the explicit option ended up with me a) having a mouseover area where the hidden handles were b) if the handle I wanted overlapped the hidden handles I couldn’t move it easily.

[github-actions[bot]]

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.