How to reset all other noUiSliders but the one the

Question

I have multiple sliders, each of them linked to form fields. When any of them gets updated, either by dragging or typing, I want to reset all the others.

The reason for this is that I want the user to save his changes to one slider (form) before he tries to change another. Else, I reset the changes.

I can't listen to the update or set events and call .set() on the other sliders, because that would trigger an endless loop.

So how can I reset a slider without triggering any event? Or anyone has a different approach?

(adding code as requested)

slider.noUiSlider.on('set', function(values, handle) {
    $(slider).parents('form').siblings('form').find('my-slider').each(function() {
        var values = this.noUiSlider.get();
        var originals = $(this).closest('.mirror-field').toArray();
        values.forEach( function(val, index) {
            if ( ! val.isSame(originals[index].value)) { // val is a 'moment' object
                values[index] = originals[index].value;
            }
        });
        this.noUiSlider.set(values); // this is when chaos is unleashed
    });
});

Answer 1

try using "slide"

SLIDER1.noUiSlider.on('slide', function(){
    SLIDER2.noUiSlider.set( *defaultvalue* );
    SLIDER3.noUiSlider.set( *defaultvalue* );
    ...
});

"slide" doesn't call the .set() method but works somehow the same as "update"

maybe this is your solution :)