Sets the slider's width.

Code examples

Initialize a jqxSlider with the width property specified.

$('#jqxSlider').jqxSlider({ width:"300px" });

Sets the slider's height.

Code examples

Initialize a jqxSlider with the height property specified.

$('#jqxSlider').jqxSlider({ height:"15px" });

Gets or sets whether the slider is disabled.

Code examples

Initialize a jqxSlider with the disabled property specified.

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

Sets or gets slider's maximum value.

Code examples

Initialize a jqxSlider with the max property specified.

$('#jqxSlider').jqxSlider({ max: 100 }); 

Sets or gets slider's minimum value.

Code examples

Initialize a jqxSlider with the min property specified.

$('#jqxSlider').jqxSlider({ min: 500 }); 

Sets or gets the slider's step when the user is using the keyboard arrows, slider increment and decrement buttons or the mouse wheel for changing the slider's value.

Code examples

Initialize a jqxSlider with the step property specified.

$('#jqxSlider').jqxSlider({ step: 2 }); 

Sets or gets whether ticks will be shown.

Code examples

Initialize a jqxSlider with the showTicks property specified.

$('#jqxSlider').jqxSlider({ showTicks: false }); 

Sets or gets slider's ticks position. Possible values - 'top', 'bottom', 'both'.

Code examples

Initialize a jqxSlider with the ticksPosition property specified.

$('#jqxSlider').jqxSlider({ ticksPosition: 'top' }); 

Sets or gets slider's ticks frequency.

Code examples

Initialize a jqxSlider with the ticksFrequency property specified.

$('#jqxSlider').jqxSlider({ ticksFrequency: 1 }); 

Sets or gets whether the scroll buttons will be shown.

Code examples

Initialize a jqxSlider with the showButtons property specified.

$('#jqxSlider').jqxSlider({ showButtons: false });

                        

Sets or gets scroll buttons position. Possible values 'both', 'left', 'right'.

Code examples

Initialize a jqxSlider with the buttonsPosition property specified.

$('#jqxSlider').jqxSlider({ buttonsPosition: 'left' }); 

Sets or gets slider's mode. In the 'default' mode, the slider's thumb can be dragged smoothly ( like a scrollbar ). In 'fixed' mode, the thumb is dragged with a 'step' specified by the 'step' property.

Code examples

Initialize a jqxSlider with the mode property specified.

$('#jqxSlider').jqxSlider({ mode: 'fixed' }); 

Sets or gets whether the slider range background is displayed. This is the fill between the slider's left button and the slider's thumb to indicate the selected value. In range slider mode, the space between the handles is filled to indicate the selected values.

Code examples

Initialize a jqxSlider with the showRange property specified.

$('#jqxSlider').jqxSlider({ showRange: false }); 

Sets or gets whether the slider is displayed as a range slider and has 2 thumbs. This allows the user to select a range of values. By default, end-users can select only a single value.

Code examples

Initialize a jqxSlider with the rangeSlider property specified.

$('#jqxSlider').jqxSlider({ rangeSlider: true }); 

Sets or gets whether the slider title will be shown.

Code examples

Initialize a jqxSlider with the tooltip property specified.

$('#jqxSlider').jqxSlider({ tooltip: false }); 

Sets or gets slider's value. This poperty will be an object with the following structure { rangeStart: range_start, rangeEnd: range_end } if the slider is range slider otherwise it's going to be a number.

Code examples

Initialize a jqxSlider with the value property specified.

$('#jqxSlider').jqxSlider({ value: 5 }); 

Sets or gets range slider's values.

Code examples

Initialize a jqxSlider with the values property specified.

$('#jqxSlider').jqxSlider({ values: [2, 3] }); 

Change is triggered when the value of the slider is changed.

Code examples

Bind to the change event by type: jqxSlider.

$('#jqxSlider').bind('change', function (event) { // Some code here. }); 

This event is triggered when the user is dragging the sliders thumb.

Code examples

Bind to the slide event by type: jqxSlider.

$('#jqxSlider').bind('slide', function (event) { // Some code here. }); 

SlideStart is triggered when the user start dragging slider's thumb.

Code examples

Bind to the slideStart event by type: jqxSlider.

$('#jqxSlider').bind('slideStart', function (event) { // Some code here. }); 

slideEnd event is triggered when the user have dragged the slider's thumb and drop it.

Code examples

Bind to the slideEnd event by type: jqxSlider.

$('#jqxSlider').bind('slideEnd', function (event) { // Some code here. }); 

This event is triggered when the jqxSlider is created.

Code examples

Bind to the created event by type: jqxSlider.

$('#jqxSlider').bind('created', function (event) { // Some code here. }); 

Increases the jqxSlider's value with the value of the 'step' property.

Code example

Invoke the incrementValue method.

$('#jqxSlider').jqxSlider('incrementValue');

Decreases the jqxSlider's value with the value of the 'step' property.

Code example

Invoke the decrementValue method.

$('#jqxSlider').jqxSlider('decrementValue');

Sets the jqxSlider's value. When the slider is not in range slider mode, the required parameter for the value is a number which should be in the 'min' - 'max' range. Possible value types in range slider mode- array, object or two numbers.

Code example

Invoke the setValue method.

$('#jqxSlider').jqxSlider('setValue', 3);

Getting slider's value. If it's a range slider this method returns an array.

Code example

Invoke the getValue method.

$('#jqxSlider').jqxSlider('getValue');

Disabling the slider.

Code example

Invoke the disable method.

$('#jqxSlider').jqxSlider('disable');

Enables the slider.

Code example

Invoke the enable method.

$('#jqxSlider').jqxSlider('enable', element);