jquery ui slider live update

Question

I've written a script for a simple jquery ui slider. There are two sliders (later I'll add more) and when you change their value, it displays below them, and then updates a total. What I'm having a hard time figuring out, is how to make it so as you're sliding the values are getting updated, instead of getting updated after you've finished.

Thanks for any help!

Fiddle of Demo 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

Use the slider's .slide() event and try it like this:

jsFiddle example

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