noUISlider - 如何在不删除元素的情况下销毁 noUiSlider？

Question

我的 HTML 中有一个元素，其中包含一些 HTML。单击按钮（启动滑块），我将其转换为 noUISlider。还有另一个按钮可以隐藏滑块（Hide Slider）。我想隐藏滑块，但将 HTML 和 HTML 保留在其中。我正在尝试滑块.nouislider.destroy();但它完全删除了元素。

对此的任何帮助表示赞赏。

谢谢。

苏哈斯

Answer 1

好的，这就是我所做的，它对我有用。希望它可以对某人有所帮助，或者如果有更好的方法可以做到这一点，请告诉我。

我的 HTML 是

<div class="sliderContainer" id="slider">some HTML code</div>

我的JS代码是

var sliderActive = false;

function createSlider() {
    if (!sliderActive) {
        sliderActive = true;
        noUiSlider.create(slider, {
            start: [360, 1080],
            connect: true,
            step: 15,
            behaviour: 'drag',
            tooltips: [
                {
                    to: function (value) {
                        return processValue(value);
                    },
                    from: function (value) {
                        return processValue(value);
                    }
                },
                {
                    to: function (value) {
                        return processValue(value);
                    },
                    from: function (value) {
                        return processValue(value);
                    }
                },
            ],
            range: {
                'min': 0,
                'max': 1440,
            }
        });
    }
}

function destroySlider() {
    sliderActive = false;
    $('.sliderContainer').attr('class', 'sliderContainer');
    $('.noUi-base').remove();
    delete slider.noUiSlider;
    slider = document.getElementById('slider');
}

谢谢。