Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).

Code examples

Set the value property.

$('#jqxProgressBar').jqxProgressBar({  value: 100});

Get the value property.

var value = $('#jqxProgressBar').jqxProgressBar('value');

Sets or gets the progress bar's max value.

Code examples

Set the max property.

$('#jqxProgressBar').jqxProgressBar({  max: 150 });

Get the max property.

var max = $('#jqxProgressBar').jqxProgressBar('max');

Sets or gets the progress bar's min value.

Code examples

Set the min property.

$('#jqxProgressBar').jqxProgressBar({ min: 10 });

Get the min property.

var min = $('#jqxProgressBar').jqxProgressBar('min');

Sets or gets the orientation.

Possible Values:

'vertical'

'horizontal'

Code examples

Set the orientation property.

$('#jqxProgressBar').jqxProgressBar({orientation: "vertical"  });

Get the orientation property.

var orientation = $('#jqxProgressBar').jqxProgressBar('orientation');

Sets or gets the progress bar's width.

Code examples

Set the width property.

$('#jqxProgressBar').jqxProgressBar({width:"250px"  });

Get the width property.

var width = $('#jqxProgressBar').jqxProgressBar('width');

Sets or gets the progress bar's height.

Code examples

Set the height property.

$('#jqxProgressBar').jqxProgressBar({height:"100px"  });

Get the height property.

var height = $('#jqxProgressBar').jqxProgressBar('height');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxProgressBar').jqxProgressBar({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxProgressBar').jqxProgressBar('rtl'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the visibility of the progress bar's percentage's text.

Code examples

Set the showText property.

$('#jqxProgressBar').jqxProgressBar({showText:true});

Get the showText property.

var showText = $('#jqxProgressBar').jqxProgressBar('showText'); 

Sets or gets the jqxProgressBar's layout.

Possible Values:

'normal'

'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)

Code examples

Set the layout property.

$('#jqxProgressBar').jqxProgressBar({ layout: "reverse" }); 

Get the layout property.

var layout = $('#jqxProgressBar').jqxProgressBar('layout'); 

Determines the duration of the progressbar's animation.

Code examples

Set the animationDuration property.

$('#jqxProgressBar').jqxProgressBar({animationDuration:0});

Get the animationDuration property.

var animationDuration = $('#jqxProgressBar').jqxProgressBar('animationDuration'); 

Determines whether the progress bar is disabled.

Code examples

Set the disabled property.

$('#jqxProgressBar').jqxProgressBar({disabled:true});

Get the disabled property.

var disabled = $('#jqxProgressBar').jqxProgressBar('disabled'); 

This event is triggered when the value is changed.

Code examples

Bind to the valuechanged event by type: jqxProgressBar.

$('#jqxProgressBar').on('valuechanged', function (event) { var value = event.currentValue; });

This event is triggered when the user enters an invalid value( value which is not Number or is out of the min - max range. )

Code examples

Bind to the invalidvalue event by type: jqxProgressBar.

$('#jqxProgressBar').on('invalidvalue', function (event) { // Some code here. });

This event is triggered when the value is equal to the max. value.

Code examples

Bind to the complete event by type: jqxProgressBar.

$('#jqxProgressBar').on('complete', function (event) { // Some code here. }); 

Sets the progress bar's value.

Code examples

Invoke the actualValue method.

//@param Number

$('#jqxProgressBar').jqxProgressBar('actualValue', 50); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxProgressBar').jqxProgressBar('destroy'); 

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxProgressBar").jqxProgressBar('val');

// Get the value using jQuery's val()

var value = $("#jqxProgressBar").val();

// Set value.

$("#jqxProgressBar").jqxProgressBar('val', 50);

// Set value using jQuery's val().

$("#jqxProgressBar").val(50);