Properties

Name Type Default
disabled Boolean false

Sets or gets whether the scrollbar is disabled.

Code examples

Set the disabled property. 

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

Get the disabled property. 

var disabled = $('#jqxScrollBar').jqxScrollBar('disabled');
Try it: disabled is set to true
height Number/String null

Sets or gets height of the scroll bar.

Code examples

Set the height property. 

$('#jqxScrollBar').jqxScrollBar({ height: '25px', });

Get the height property. 

var height = $('#jqxScrollBar').jqxScrollBar('height');
Try it: height is set to 18
largestep Number 50

Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.

Code examples

Set the largestep property. 

$('#jqxScrollBar').jqxScrollBar({ largestep:35 });

Get the largestep property. 

var largestep = $('#jqxScrollBar').jqxScrollBar('largestep');
Try it: largestep is set to 100
min Number 0

Sets or gets the scrollbar's minimum value.

Code examples

Set the min property. 

$('#jqxScrollBar').jqxScrollBar({ min:7 });

Get the min property. 

var min = $('#jqxScrollBar').jqxScrollBar('min');
Try it: min is set to 3
max Number 1000

Sets or gets the scrollbar's maximum value.

Code examples

Set the max property. 

$('#jqxScrollBar').jqxScrollBar({ max:700 });

Get the max property. 

var max = $('#jqxScrollBar').jqxScrollBar('max');
Try it: max is set to 120
rtl Boolean false

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. 

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

Get the rtl property. 

var rtl = $('#jqxScrollBar').jqxScrollBar('rtl');
Try it: rtl is set to true
step Number 10

Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.

Code examples

Set the step property. 

$('#jqxScrollBar').jqxScrollBar({ step:7 });

Get the step property. 

var step = $('#jqxScrollBar').jqxScrollBar('step');
Try it: step is set to 20
showButtons Boolean true

Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.

Code examples

Set the showButtons property. 

$('#jqxScrollBar').jqxScrollBar({ showButtons: true });

Get the showButtons property. 

var showButtons = $('#jqxScrollBar').jqxScrollBar('showButtons');
Try it: showButtons is set to false
thumbMinSize Number 10

Specifies the scrollbar thumb's minimum size.

Code examples

Set the thumbMinSize property. 

$('#jqxScrollBar').jqxScrollBar({ thumbMinSize:5 });

Get the thumbMinSize property. 

var thumbMinSize = $('#jqxScrollBar').jqxScrollBar('thumbMinSize');
Try it: thumbMinSize is set to 5
theme String ''

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.
Try it: theme is set to 'energyblue'
vertical Boolean false

Sets or gets the scrollbar's orientation.

Code examples

Set the vertical property. 

$('#jqxScrollBar').jqxScrollBar({ vertical: true });

Get the vertical property. 

var vertical = $('#jqxScrollBar').jqxScrollBar('vertical');
Try it: vertical is set to true
value Number

Sets or gets the scrollbar's value.

Code examples

Set the value property. 

$('#jqxScrollBar').jqxScrollBar({ value:700 });

Get the value property. 

var value = $('#jqxScrollBar').jqxScrollBar('value');
Try it: value is set to 20
width Number/String null

Sets or gets width of the scroll bar.

Code examples

Set the width property. 

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

Get the width property. 

var width = $('#jqxScrollBar').jqxScrollBar('width');
Try it: width is set to 250

Events
valueChanged Event

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event by type: jqxScrollBar. 

$('#jqxScrollBar').on('valueChanged', function (event) 
{
    var currentValue = event.currentValue; 
    var previousValue = event.previousValue;
});
Try it: Bind to the valueChanged event by type: jqxScrollBar.

Methods
destroy Method

Destroys the widget.

Parameter Type Description
None
Return Value
None

Code examples

Invoke the destroy method. 

$('#jqxScrollBar').jqxScrollBar('destroy');
Try it: destroy the jqxScrollBar
isScrolling Method

Returns true, if the user is scrolling. Otherwise, returns false.

Parameter Type Description
None
Return Value
Boolean

Code examples

Invoke the isScrolling method. 

var scrolling = $('#jqxScrollBar').jqxScrollBar('isScrolling');
Try it: invoke the isScrolling method of the jqxScrollBar
setPosition Method

Sets the thumb's position

Parameter Type Description
index Number
Return Value
None

Code examples

Invoke the setPosition method. 

//@param Number
$('#jqxScrollBar').jqxScrollBar('setPosition', 50);
Try it: sets the possition of the jqxScrollBar