Demo of JQuery progress bar with dynamic value



  • Video Tutorial on JQuery UI Progress Bar

HTML

<div id="progress_bar"></div>
  <button id=b1> + </button> <button id=b2> - </button>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar" ).progressbar({
  value: 60,
  max:100,
  min:0
});
////////////////
/////////////////
$("#b1").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value + 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");

})
///////////////
////////////////
$("#b2").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value - 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");
})
///////////////
})
</script>
DEMO reading and setting value for second progress bar

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer