如何使用一个Jquery UI滑块控制2个金额

Question

如何使用1个滑块

控制2个金额

以下是我控制一个量的滑块的代码。

$(function() {
    $("#slider").slider({
        value:38.11,
        min: 38.11,
        max: 100,
        step: 1,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider").slider("value"));
});

任何人都可以帮忙吗？

Answer 1

修改 如果你想使用相同的滑块处理2个值，添加和减去所以它们的总和总是相同的，解决方案非常简单。在幻灯片功能中，您可以执行以下操作：

$(function() {
    $("#slider").slider({
            value:38.11,
            min: 38.11,
            max: 100,
            step: 1,
            slide: function (event, ui) {
                $("#amount").val('$' + ui.value);
                $("#otheramount").val('$' + (100 - ui.value));
}
    });
    $("#amount").val('$' + $("#slider").slider("value"));
});

这就是完整功能的样子。

Answer 2

$(function() {
        $("#slider").slider({
                value:38.11,
                min: 38.11,
                max: 100,
                step: 1,
                slide: function(event, ui) {
                        $("#amount").val('$' + ui.value);
                        $("#otherAmount").val('$' + ui.value);
                }
        });
        $("#amount").val('$' + $("#slider").slider("value"));
        $("#otherAmount").val('$' + $("#slider").slider("value"));
});

Answer 3

我认为不是使用值而是使用值并给出多个值，所以：

values: [1,5,9]

这应该有助于解释http://docs.jquery.com/UI/Slider#option-values