nouislider

noUISlider - Any way to place labels within the connect segments

I have a noUiSlider with several handles to allow specifying several contiguous date periods (example = Feb to Apr, May to July, and Aug to Sept). Ideally I would like to have labels that appear centered on the connect divisions to describe what each period relates to (ex. "Current Period", "Next Period"). I was thinking I could do this by setting a centered background image on the noUi-connect divisions.

However, the noUi-connect divisions use transform (translate/scale) styling which results in my background images being scaled which I do not want.

I also thought maybe I could revise the javascript to generate an outer division around each nonUi-connect division, and I would apply the background onto the outer division instead - but I was unable to get the background from the outer division to appear.

Any other ways I could accomplish this? The only other thing I can think of it to have floating divisions defined outside of the noUiSlider object which I would need to reposition whenever I detect changes in the handle positions.

Solution

  • You can add an element outside of the connects and absolutely position it.

    A quick version for a slider with two handles (showing the value for the first handle):

    Slider with two handles showing value in connect

    var origin = slider.querySelector('.noUi-connects');
var node = document.createElement('div');

node.style.textAlign = 'center';
node.style.position = 'absolute';
node.style.zIndex = '10';
node.style.fontSize = '10px';

origin.appendChild(node);

slider.noUiSlider.on('update', function(values, handle, unencoded, tap, positions) {
    node.style.left = positions[0] + '%';
    node.style.right = (100 - positions[1]) + '%';
    node.innerText = values[0];
});