javascript - 通过 onclick 事件使用 noUiSlider 创建范围时出错

Question

我有一个简单的 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."

如何解决？

Answer 1

在每次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]);
}

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