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 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 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 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 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 slider's minor ticks frequency.

Code examples

Set the minorTicksFrequency property.

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

Get the minorTicksFrequency property.

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

Sets or gets slider's minor ticks size.

Code examples

Set the minorTickSize property.

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

Get the minorTickSize property.

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

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 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 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 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 whether minor ticks will be shown.

Code examples

Set the showMinorTicks property.

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

Get the showMinorTicks property.

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

Sets or gets whether major tick labels will be shown.

Code examples

Set the showTickLabels property.

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

Get the showTickLabels property.

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

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

Determines the template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxSlider").jqxSlider({ template: 'primary'});

Get the template property.

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

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 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 major ticks frequency.

Code examples

Set the ticksFrequency property.

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

Get the ticksFrequency property.

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

Sets or gets slider's major ticks size.

Code examples

Set the tickSize property.

$('#jqxSlider').jqxSlider({ tickSize: 10 }); 

Get the tickSize property.

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

Sets or gets the major ticks labels formatting function.

Code examples

Set the tickLabelFormatFunction property.

$('#jqxSlider').jqxSlider({ tickLabelFormatFunction: function (value) {
    return new $.jqx.math().getDecimalNotation(value, 'exponential');
}
});

Get the tickLabelFormatFunction property.

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

Sets or gets whether the slider tooltip 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 the tooltip's hide delay.

Code examples

Set the tooltipHideDelay property.

$('#jqxSlider').jqxSlider({ tooltipHideDelay: 2000 }); 

Get the tooltipHideDelay property.

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

Sets or gets the tooltip's position. Possible values: "near", "far"

Code examples

Set the tooltipPosition property.

$('#jqxSlider').jqxSlider({ tooltipPosition: "far" }); 

Get the tooltipPosition property.

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

Sets or gets the tooltip's tooltip formatting.

Code examples

Set the tooltipFormatFunction property.

$('#jqxSlider').jqxSlider({ tooltipFormatFunction: function(value){return new Number(value).toPrecision(2); }}); 

Get the tooltipFormatFunction property.

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

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

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

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;  var type = event.args.type; // keyboard, mouse or null depending on how the value was changed.
  });

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

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

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

Code example

Invoke the decrementValue method.

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

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

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.

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

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

Code example

Invoke the incrementValue method.

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

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

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