Sets or gets the slider's width.

Code examples

Set the width property.

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

Get the width property.

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

Sets or gets the slider's height.

Code examples

Set the height property.

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

Get the height property.

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

Sets or gets whether the slider is disabled.

Code examples

Set the disabled property.

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

Get the disabled property.

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

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.

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

Get the rtl property.

var rtl = $('#jqxSlider').jqxSlider('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 slider's maximum value.

Code examples

Set the max property.

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

Get the max property.

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

Sets or gets slider's minimum value.

Code examples

Set the min property.

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

Get the min property.

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

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

Set the step property.

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

Get the step property.

var step = $('#jqxSlider').jqxSlider('step'); 

Sets or gets whether ticks will be shown.

Code examples

Set the showTicks property.

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

Get the showTicks property.

var showTicks = $('#jqxSlider').jqxSlider('showTicks'); 

Sets or gets slider's ticks position.

Possible Values:

'top'

'bottom'

'both'

Code examples

Set the ticksPosition property.

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

Get the ticksPosition property.

var ticksPosition = $('#jqxSlider').jqxSlider('ticksPosition'); 

Sets or gets slider's ticks frequency.

Code examples

Set the ticksFrequency property.

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

Get the ticksFrequency property.

var ticksFrequency = $('#jqxSlider').jqxSlider('ticksFrequency'); 

Sets or gets whether the scroll buttons will be shown.

Code examples

Set the showButtons property.

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

Get the showButtons property.

var showButtons = $('#jqxSlider').jqxSlider('showButtons'); 

Sets or gets scroll buttons position.

Possible Values:

'both'

'left'

'right'

Code examples

Set the buttonsPosition property.

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

Get the buttonsPosition property.

var buttonsPosition = $('#jqxSlider').jqxSlider('buttonsPosition'); 

Sets or gets slider's mode.

Possible Values:

'default'- the slider's thumb can be dragged smoothly ( like a scrollbar )

'fixed'- the thumb is dragged with a 'step' specified by the 'step' property.

Code examples

Set the mode property.

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

Get the mode property.

var mode = $('#jqxSlider').jqxSlider('mode'); 

Sets or gets the slider's layout.

Possible Values:

'normal'

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

Code examples

Set the layout property.

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

Get the layout property.

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

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

Set the showRange property.

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

Get the showRange property.

var showRange = $('#jqxSlider').jqxSlider('showRange'); 

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

Set the rangeSlider property.

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

Get the rangeSlider property.

var rangeSlider = $('#jqxSlider').jqxSlider('rangeSlider'); 

Sets or gets whether the slider title will be shown.

Code examples

Set the tooltip property.

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

Get the tooltip property.

var tooltip = $('#jqxSlider').jqxSlider('tooltip'); 

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

Set the value property.

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

Get the value property.

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

Sets or gets range slider's values.The 'rangeSlider' property should be set to true.

Code examples

Set the values property.

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

Get the values property.

var values = $('#jqxSlider').jqxSlider('values'); 

This event is triggered when the value of the slider is changed.

Code examples

Bind to the change event by type: jqxSlider.

$('#jqxSlider').on('change', function (event) {var value = event.args.value;});

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

Code examples

Bind to the slide event by type: jqxSlider.

$('#jqxSlider').on('slide', function (event) {  var value = event.args.value; }); 

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

Code examples

Bind to the slideStart event by type: jqxSlider.

$('#jqxSlider').on('slideStart', function (event) { var value = event.args.value; }); 

This 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').on('slideEnd', function (event) { var value = event.args.value; }); 

This event is triggered when the jqxSlider is created.

Code examples

Bind to the created event by type: jqxSlider.

$('#jqxSlider').on('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);

Gets the slider's value. The returned value is a Number or an Object. If the Slider is a range slider, the method returns an Object with the following fields: rangeStart - the range's start value and rangeEnd - the range's end value..

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);

Focuses the widget.

Code examples

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

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

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

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

// Set value.

$("#jqxSlider").jqxSlider('val', 40);

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

$("#jqxSlider").val(40);