1

I got three buttons which should set the value for a group of sliders and the textfields for the slider value output. The function does however only change one of the sliders.

See: http://jsfiddle.net/josepha/anb9G/

//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);
});
4

1 回答 1

0

原因是该slide事件不是由值/选项方法触发的，而是仅在您与滑块本身交互时触发的。

文档：http ://wiki.jqueryui.com/w/page/12138059/Slider#specs

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

代码：

//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"));

工作小提琴：http: //jsfiddle.net/anb9G/1/

于 2013-07-10T16:45:45.860 回答