How to toggle between two sliders without unbounding events?

Question

I have a trickie issue in terms of noUiSlider usage. I have two sliders that I'd like to toggle depending on the need.

Now the problem is that one is from left-to-right and the other from right-to-left. If I now destroy the slider and create a new one everything works like a charm. But the problem is, that the 'slide' event will then be unbound due to the destruction which I definitely need to avoid.

Any workaround for this?

Answer 1

You have some options:

You can create two sliders (one left-to-right, one right-to-left), attach the event handler to both, and hide the one not in use;

Alternatively, you can re-add the same event handler after recreating the slider.

As pseudocode:

function initializeSlider(direction) {
    var slideEventHandler = function () { /***/ }

    var slider = noUiSlider.create( /.../ );

    slider.noUiSlider.on('slide', slideEventHandler);
}


initializeSlider('rtl');

// ....

slider.noUiSlider.destroy();

initializeSlider('ltr');