CODEWITHSUNDEEP
jquerynouislider
TBBW
TBBW

Reputation: 25

NoUiSlider Tooltip

Made a Slider using noUislider. How do I hide and show the tooltip?

Here's what I have so far:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [10],
    connect: "lower",
    tooltips: [wNumb({decimals:0})],
    orientation:"vertical",
    direction:"ltr",
    range: {
        'min': 000,
        'max': 100
    }
});

slider.noUiSlider.on('start', function(){
    ;
});

slider.noUiSlider.on('end', function(){
    ;
});

Upvotes: 1

Views: 2178

Answers (2)

Stathis Papalefkas
Stathis Papalefkas

Reputation: 121

noUiSlider has an update option function 

updateSlider.noUiSlider.updateOptions({
      tooltips: false
});

You could toggle the tooltip option on the respected event

Upvotes: 2

Lg102
Lg102

Reputation: 4898

First, find the tooltip: var tt = slider.querySelector('.noUi-tooltip');.

Then you can toggle a hidden class that you've defined in CSS: (e.g. .hidden { display: none; }): tt.classList.toggle('hidden').

Upvotes: 0

Related Questions