jQuery sliders do not change value correctly when changing steps

Question

http://jsfiddle.net/ntSrb/4/

Problem: The second slider should decrement in steps of 1 as the first slider changes by steps of 3

I have inspected the changes of the second slider and its as if the first time the first slider changes it works, after that the second slider just doesnt register new values

Also the second slider jumps randomly if you pull the first slider by large steps.

This is a simplified version of my problem because in reality I have 4 sliders which will affect eachother in a similar way (as one slider increments by 3, then the three other sliders decrements by 1)

HTML

<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>

JS

function updateSpans(numberChange) {

    var oldval;
    var newval;

    oldval = $("#secondrange").slider("value"); //number                 
    newval = Math.round(oldval + numberChange / 3);

    $('#secondrange').slider("option", "step", 1);
    $("#secondrange").slider("option", "value", newval);
    $('#secondrange').slider("option", "step", 3);
    $("#secondspan").text(newval);
}

$(function () {
    $("#firstrange").slider({
        orientation: "horizontal",
        min: 0,
        max: 100,
        value: 25,
        step: 3,
        slide: function (event, ui) {
            var currentvalue = ui.value; //number
            var oldvalue = parseInt($('#firstspan').text()); //number
            $("#firstspan").text(currentvalue);
            updateSpans(oldvalue - currentvalue);
        },
    });
});

$(function () {
    $("#secondrange").slider({
        orientation: "horizontal",
        min: 0,
        max: 100,
        value: 25,
        step: 3,
    });
});

Answer 1

Please see this jsFiddle Link. I have change your jsfiddle code and now it works. Please check. Change in line 22:

change: function(event, ui){