jQuery UI Slider to change percentage when select or input is changed

Question

I am having problems updating the ui jquery slider when a select is changed or input is changed - anyone have any ideas on the source to resolve this?

$('.application-progress').slider({
    range: "min",
    min: 0,
    max: 100,
    animate: true,
    slide: function(event, ui){
        $("#progress").html(ui.value+"%");
    }
});
$("#progress").html($(".application-progress").slider("value")+"%");

$('input').focusout(function(){
    var percentage = 0;
    $('input').each(function(){
        if($(this).val() != "")
            percentage += 10;
    });
    $("#progress").slider({value: percentage});
    $("#progress").html($(".application-progress").slider("value")+"%");
});

I have added to jsfiddle: http://jsfiddle.net/Ykx5f/1/.

score 0 · Answer 1 · answered Sep 25 '12 at 10:16

0

I have updated your fiddle. Attach to the change event rather than the focusout/blur.

answered Sep 25 '12 at 10:16

Konstantin Dinev

34,219
14
75
100

VisioN · Accepted Answer · 2012-09-25T10:25:34.827

0

Is that you are trying to achieve?

$("input, select").change(function() {
    var percentage = 0;
    $('input, select').each(function() {
        if ($.trim(this.value) != "") percentage += 10;
    });
    $(".application-progress").slider("value", percentage);

    $("#progress").html(percentage + "%");
});

DEMO: http://jsfiddle.net/Ykx5f/9/

And here is the updated version, which automatically calculates the percentage based on the number of input fields:

$("input, select").change(function() {
    var fields = $("input, select");
    var percentage = 100 * fields.filter(function() {
        return $.trim(this.value) != "";
    }).length / fields.length;

    $(".application-progress").slider("value", percentage);
    $("#progress").html(percentage + "%");
});

DEMO: http://jsfiddle.net/Ykx5f/11/

edited Sep 25 '12 at 10:25

answered Sep 25 '12 at 10:19

VisioN

143,310
32
282
281

Works great with the inputs but select does not? – James Brandon Sep 25 '12 at 10:20
It will work if you change the value of "Select Title" option: ``. See the updated fiddle. – VisioN Sep 25 '12 at 10:21
My bad it does seem to work, but the 1st is a dropdown and when changed just to 50% 1st? – James Brandon Sep 25 '12 at 10:21
I changed the value on selects and works a treat! thanks very much! – James Brandon Sep 25 '12 at 10:22
@JamesBrandon You are welcome! BTW, check the better version in the updated answer. – VisioN Sep 25 '12 at 10:26
I use that new version and with all fields and selects used i get 91.66666666666667% – James Brandon Sep 25 '12 at 11:40
@JamesBrandon You can use `Math.round(percentage)`. – VisioN Sep 25 '12 at 11:42
I used the math round and works perfect however even though completing the 10 fields i only get 92% – James Brandon Sep 25 '12 at 11:44
Its ok, i resolved it - was because i had some other inputs in the footer so i made it more specific to that form and works great! thanks all – James Brandon Sep 25 '12 at 11:45

jQuery UI Slider to change percentage when select or input is changed

2 Answers2