CODEWITHSUNDEEP
jquery-uiuislider
loriensleafs
loriensleafs

Reputation: 2255

jquery ui slider live update

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

Upvotes: 1

Views: 2019

Answers (1)

j08691
j08691

Reputation: 208002

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

Upvotes: 4

Related Questions