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课程:(例如.hidden { display: none; }）：tt.classList.toggle('hidden')。