Jquery 设置多个滑块值和链接文本字段

我有三个按钮，可以设置一组滑块的值和滑块值输出的文本字段。但是，该功能仅更改其中一个滑块

见：

---

原因是

slide

事件不是由value/option方法触发的，而是仅当您与滑块本身交互时触发的

文件：

您可以使用在值/选项集中触发的事件来更改它

代码：

---

工作小提琴：

我看不出任何问题。所有3个滑块工作良好，以回应DKM，滑块工作良好。可能会让你不高兴的是，第一个/最后一个设置为5，这与它们的起始值相同。

//slider
$("#slider-design").slider({
    range: "min",
    value: 2,
    min: 1,
    max: 5,
    slide: function (event, ui) {
        $("#amount-design").val(ui.value);
    }
});
$("#amount-design").val($("#slider-design").slider("value"));

$("#slider-pages").slider({
    range: "min",
    value: 5,
    min: 1,
    max: 10,
    slide: function (event, ui) {
        $("#amount-pages").val(ui.value);
    }
});
$("#amount-pages").val($("#slider-pages").slider("value"));

$("#slider-hours").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    slide: function (event, ui) {
        $("#amount-hours").val(ui.value);
    }
});
$("#amount-hours").val($("#slider-hours").slider("value"));

$("#preset-small").click(function () {
    $("#slider-pages").slider("value", 5);
    $("#slider-design").slider("value", 1);
    $("#slider-hours").slider("value", 5);
});

//slider
$("#slider-design").slider({
    range: "min",
    value: 2,
    min: 1,
    max: 5,
    change: function (event, ui) {
        $("#amount-design").val(ui.value);
    }
});
$("#amount-design").val($("#slider-design").slider("value"));

$("#slider-pages").slider({
    range: "min",
    value: 5,
    min: 1,
    max: 10,
    change: function (event, ui) {
        $("#amount-pages").val(ui.value);
    }
});
$("#amount-pages").val($("#slider-pages").slider("value"));

$("#slider-hours").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    change: function (event, ui) {
        $("#amount-hours").val(ui.value);
    }
});
$("#amount-hours").val($("#slider-hours").slider("value"));