nouislider

noUiSlider - Place Both Tooltips above Slider?


Is it possible to specify the position of the tooltips that noUiSlider draws? It appears that by default it places the first one over the slider, and the second below. I understand the usability goal here, but I'd like to put both above or below.

Example (with tooltips above and below): http://jsfiddle.net/leongersen/z83oz9np/2/

noUiSlider.create(div, {
    start: [0, 50], // 2 handles
    range: {
        'min': 0,
        'max': 50
    },
    tooltips: true // 2 tooltips but how to position?
});

Solution

  • I don't believe there is an option to specify the position of the labels. In the css version you're using there's

    .noUi-horizontal .noUi-handle-upper .noUi-tooltip { 
      bottom:-32px 
    }
    

    Which you can override to be the same as the other label:

      .noUi-horizontal .noUi-handle-upper .noUi-tooltip {
        top: -32px;
        bottom: initial;
      }
    

    See your updated fiddle: http://jsfiddle.net/z83oz9np/20/

    Think that's the best thing to do here. In the latest version on github I've noted this styling is missing, so take this into account if you ever update it.