Click to increase or Decrease jQuery Ui Progress bar

Question

I have a jQuery UI progress bar I am wanting to Add something Extra on it . I am not Sure if is this possible or not because I am not Good at jQuery or javascripts .

Here What I currently have ( js fiddle ): http://jsfiddle.net/saifrahu28/WH2dt/

What I am wanting : I am Trying to have functionality like, If I Click on the " + " The value will increase and also the progress bar . Currently it have " 50% " on value also in the Progress bar . SO is this possible to have if I click on the + the value and the Progress bar will increase and also if I click on the " - " the value and the progress bar will decrease .

If There is a solution of this it will be a great help for me .

HTML

<div id="progressbar"></div>

  <p>+</p>
  <p>-</p>

  <p>50%</p>

js

$(function() {
$( "#progressbar" ).progressbar({
  value: 50
 });
});

Answer 1

You can do this like below,

$(function() {
    $( "#progressbar" ).progressbar({
      value: 50
    })
    .data("value","50");

    $("#plus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue <= 100) {
            $( "#progressbar" ).progressbar({
              value: currValue+1
            }).data("value",currValue+1);
            $("#progressLabel").html((currValue+1)+"%");
        }    
    });

    $("#minus").click(function() {
        var currValue = $( "#progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue > 0) {
            $( "#progressbar" ).progressbar({
              value: currValue-1
            }).data("value",currValue-1);
            $("#progressLabel").html((currValue-1)+"%");
        }    
    });

  });

Check this http://jsfiddle.net/JfYsh/

Answer 2

give id to + & - paragraph and using jquery you can do this using .click event. you can also see it here: http://jsfiddle.net/WH2dt/2/

Answer 3

You need to attach some click handlers to the + and - buttons which set the value of the progress bar. Try this:

$("#progressbar").progressbar({
    value: 50
});

var setProgressBarValue = function(dir) {
    var step = 5;
    var multi = $(this).hasClass('inc') ? 1 : -1
    $('#progressbar').progressbar('value', $('#progressbar').progressbar('value') + (step * multi));
}

$('.inc, .dec').click(setProgressBarValue);

Updated fiddle

Answer 4

Here is the working code for what you want to do as show in this fiddel http://jsfiddle.net/XR9Vj/

HTML

<div id="progressbar"></div>
<p class="increase">+</p>
<p class="decrease">-</p>
<p class="value">50%</p>

Javascript

$(function () {
    progressValue = 50;
    $("#progressbar").progressbar({
        value: progressValue
    });
    $('.increase').on('click', function () {
        $("#progressbar").progressbar('value', progressValue++);
        $('.value').text(progressValue + "%");
    });
    $('.decrease').on('click', function () {
        $("#progressbar").progressbar('value', progressValue--);
        $('.value').text(progressValue + "%");
    });
});

Hope it helps,

R.

Answer 5

Try this DEMO

On clicking "+" the value increase by 10 and on clicking "-" the value decrease by 10

$(function() {
    $( "#progressbar" ).progressbar({
      value: 50
    });

    $( "#plus" ).click(function(){
      $( "#progressbar" ).progressbar({
      value: $("#progressbar").progressbar("value")+10
    });
    });

    $( "#minus" ).click(function(){
      $( "#progressbar" ).progressbar({
      value: $("#progressbar").progressbar("value")-10
    });
    });
  });

Hope this helps, Thank you