NoUiSlider工具提示

Question

使用noUislider制作了一个滑块。如何隐藏和显示工具提示？

这是我到目前为止所知道的：

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(){
    ;
});

Answer 1

noUiSlider具有更新选项函数

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

您可以在受尊重的事件上切换工具提示选项

Answer 2

首先，找到工具提示：var tt = slider.querySelector('.noUi-tooltip');。

然后你可以切换你在CSS：(例如.hidden { display: none; })：tt.classList.toggle('hidden')中定义的hidden类。