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?
});
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.