CODEWITHSUNDEEP
javascriptjquerynouislider
Hai Truong IT
Hai Truong IT

Reputation: 4187

Error when use noUiSlider create range by onclick event

I have a simple 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>

and javascript function:

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

When I catch event onlick. Show this bug "Error: Slider was already initialized."

How to fix it?

Upvotes: 0

Views: 940

Answers (1)

Pal Singh
Pal Singh

Reputation: 1974

On every onclick="max_range(1000)" you are trying to create a new instance of noUiSlider. It would be working fine for the first time but when you click send time, you get your error Error: Slider was already initialized.

All you need is to update your range (min, max) when user click your link.

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

You can update options using updateOptions method. See this document for more information.

Upvotes: 1

Related Questions