使用 noUiSlider 通过点击事件创建范围时出错

Error when use noUiSlider create range by onclick event

本文关键字：创建 范围 出错 事件 noUiSlider 使用      更新时间：2023-09-26

我有一个简单的javascipt：

<a href="javascript:;" onclick="max_range(300)">Max 300</a>
<a href="javascript:;" onclick="max_range(1000)">Max 1000</a>
<div id="price"></div>

和JavaScript函数：

function max_range(max) {
   var price = document.getElementById('price');
    noUiSlider.create(price, {
        connect: true,
        behaviour: 'tap',
        start: [ 0, max ],
        step: 100,
        range: {
            'min': 0,
            'max':  max,
        }
    });
}
// load default
max_range(500);

当我抓住事件时。显示此错误"Error: Slider was already initialized."

如何解决？

在每次onclick="max_range(1000)"您都尝试创建一个新的noUiSlider实例。第一次工作正常，但是当您单击发送时间时，会出现错误Error: Slider was already initialized.

您所需要的只是在用户单击您的链接时更新您的范围（最小值、最大值）。

var price = document.getElementById('price');
noUiSlider.create(price, {
    connect: true,
    behaviour: 'tap',
    start: [ 0, 500],
    step: 100,
    range: {
        'min': 0,
        'max':  500, // your default.
    }
});
function max_range(max) {
    // Update range
    price.noUiSlider.updateOptions({
        range: {
            'min': 0,
            'max': max
        }
    });
    // Set the upper handle,
    // don't change the lower one.
    price.noUiSlider.set([null, max]);
}

您可以使用更新选项方法更新选项。有关详细信息，请参阅此文档。

相关文章：