JQuery UI Reactive Sliders (Updating Multiple Sliders Simultaneously on Slider Change)

Question

I am trying to update multiple sliders simultaneously on the slide and change events for sliders in JQuery UI.

I have code like the following:

$(function() {
    var totalSliders = 0;
    $(".slider").each(function() {
        var value = parseInt($(this).text(), 10);
        $(this).empty().slider({
            value: value,
            range: "min",
            animate: true,
            orientation: "horizontal",
            slide: updateSliders,
            change: updateSliders
        });
        totalSliders++;
    });

    function updateSliders(event, ui) {
        var activeSlider = this;
        $(".slider").slider("value", $(activeSlider).slider("value"));
    };

    $("#update").click(function() {
        $(".slider").slider("value", 10);
        return false;
    });
});

This succeeds in turning everything with a class of slider into a slider. However, whenever I move a slider, I get the following error:

Uncaught RangeError: Maximum call stack size exceeded

I've also tried the following implementation of updateSliders :

function updateSliders(event, ui) {
    var activeSlider = this;
    $(".slider").not(activeSlider).slider("value", $(activeSlider).slider("value"));
};

The following implementation of updateSliders(event, ui) works fine:

function updateSliders(event, ui) {
    console.log($(this).slider("value"));
};

Question:
How can I avoid the maximum call stack size error? I want all the sliders to update simultaneously.

Edit:
I only have three elements on the page with a class of slider , if that makes a difference.

Answer 1

Try modifying that handler:

function updateSliders(event, ui) {
    if (!event.originalEvent) return;
    var activeSlider = this;
    $(".slider").slider("value", $(activeSlider).slider("value"));
};

Now that might cause some other problems with your code, I guess, but by checking for a null "originalEvent" property you can tell when your "change" handler is being called due to a programmatic update. That will keep all the updates that you're doing from that very function from causing a firestorm of further changes.

Here is the jsfiddle.