jquery-ui - jquery ui滑块实时更新

Question

我为一个简单的 jquery ui 滑块编写了一个脚本。有两个滑块（稍后我会添加更多），当您更改它们的值时，它会显示在它们下方，然后更新总数。我很难弄清楚如何做到这一点，以便在滑动时更新值，而不是在完成后更新。

谢谢你的帮助！

演示的小提琴 http://jsfiddle.net/tMmDy/

HTML

<div class="slider_1 slider"></div>  
<p id="slider_1-value"></p>

<div class="slider_2 slider"></div>  
<p id="slider_2-value"></p>

CSS

.slider {
    width:100px;
    height:5px;
    background:blue;
}

JS $(".slider").slider({ animate: "fast", max: 25, min: 0, step: 1, value: 10, option: {} });

$(".slider_1").on("slidechange", function (event, ui) {
    total_1 = $(".slider_1").slider("value");
    $("#slider_1-value").html(total_1);
    total_value_update();
});

$(".slider_2").on("slidechange", function (event, ui) {
    total_2 = $(".slider_2").slider("value");
    $("#slider_2-value").html(total_2);
    total_value_update();
});

function total_value_update() {
    total_values = total_1 + total_2;
    $("#total_value").html(total_values);
}

Answer 1

使用滑块的.slide()事件并像这样尝试：

jsFiddle 示例

var total_1, total_2;
$(".slider").slider({
    animate: "fast",
    max: 25,
    min: 0,
    value: 10,
    slide: function (event, ui) {
        total_1 = $(".slider_1").slider("value");
        total_2 = $(".slider_2").slider("value");
        $("#slider_1-value").html(total_1);
        $("#slider_2-value").html(total_2);
        total_value_update();
    },
    change: function (event, ui) {
        total_1 = $(".slider_1").slider("value");
        total_2 = $(".slider_2").slider("value");
        $("#slider_1-value").html(total_1);
        $("#slider_2-value").html(total_2);
        total_value_update();
    }
});

function total_value_update() {
    total_values = total_1 + total_2;
    $("#total_value").html(total_values);
}