问题
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
});
});
回答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 :)
来源:https://stackoverflow.com/questions/38781910/how-to-reset-all-other-nouisliders-but-the-one-the-user-is-playing-with