Javascript jQuery滑块在更改步骤时无法正确更改值

问题：当第一个滑块更改为3步时，第二个滑块应以1步为单位递减

我已经检查了第二个滑块的变化，就像第一个滑块第一次变化时它工作一样，之后第二个滑块就没有注册新值

此外，如果您以较大的步长拉动第一个滑块，则第二个滑块将随机跳跃

这是我问题的简化版本，因为实际上我有4个滑块，它们会以类似的方式相互影响（一个滑块增加3，然后其他三个滑块减少1）

HTML

请看这个。我已经更改了您的JSFIDLE代码，现在它可以工作了。请查收。第22行的更改：

change: function(event, ui){

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,
    });
});

change: function(event, ui){