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);

当我抓住事件onlick。显示此错误"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方法更新选项。有关详细信息，请参阅this文档。

使用noUiSlider通过onclick事件

1 个答案: