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

【问题标题】：noUISlider - How to destroy the noUiSlider without deleting the element?noUISlider - 如何在不删除元素的情况下销毁 noUiSlider？
【发布时间】：2021-06-05 02:24:14
【问题描述】：

我的 HTML 中有一个元素，它里面有一些 HTML。我通过单击按钮（开始滑块）将其转换为 noUISlider。还有另一个按钮可以隐藏滑块（Hide Slider）。我想隐藏滑块但保留其中的 HTML。我正在尝试 slider.nouislider.destroy();但它会完全删除元素。

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

谢谢。

苏哈斯

【问题讨论】：

标签： nouislider

【解决方案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');
}

谢谢。

【讨论】：