i am trying to change the values of the progress bar widget to accept a json string i am getting which is something like:

{
  'totalDays' : 31,
  'daysTaken' : 20
}

so i want the 'totalDays' to be the total value of the progress bar (total length) and the 'daysTaken' to fill the progress bar.

according to the default docs, only the filled value is possible to change:

$(document).ready(function() {
  $("#progressbar").progressbar({ value: 37 });
});

i am trying to change the values of the progress bar widget to accept a json string i am getting which is something like:

{
  'totalDays' : 31,
  'daysTaken' : 20
}

so i want the 'totalDays' to be the total value of the progress bar (total length) and the 'daysTaken' to fill the progress bar.

according to the default docs, only the filled value is possible to change:

$(document).ready(function() {
  $("#progressbar").progressbar({ value: 37 });
});

• javascript
• jquery
• jquery-ui

2 Answers 2

There is a separate method to set the value after init.

var obj = {totalDays: 31, daysTaken: 20};
$("#progressbar").progressbar('value', obj.daysTaken/obj.totalDays * 100);

There is no configurable max value, but it's really not necessary since it is easy normalize values.

http://jqueryui./demos/progressbar/

This is how you set the value of jquery-ui's progress bar

$( ".selector" ).progressbar( "option", "value", 37 );

Source, the documentation at http://jqueryui./demos/progressbar/#option-value