jQuery Slider API

Name Type Default

buttonsPosition String both

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

Try it: buttonsPosition is set to 'left'

disabled Boolean false

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

Try it: disabled is set to true

height Number/String 35

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

Try it: height is set to 50

layout String "normal"

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

Try it: layout is set to 'reverse'

mode String default

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

Try it: mode is set to 'fixed'

minorTicksFrequency Number 1

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

minorTickSize Number 4

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

max Number 10

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

Try it: max is set to 15

min Number 0

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

Try it: min is set to 5

rangeSlider Bool 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

Set the rangeSlider property.

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

Get the rangeSlider property.

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

Try it: rangeSlider is set to true

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.

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

Get the rtl property.

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

Try it: rtl is set to true

step Number 1

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

Try it: step is set to 2

showTicks Boolean true

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

Try it: showTicks is set to false

showMinorTicks Boolean false

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

showTickLabels Boolean false

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

showButtons Bool true

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

Try it: showButtons is set to false

showRange Bool true

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

Try it: showRange is set to false

template String 'default'

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

Try it: template is set to 'success'

theme String ''

ticksPosition String both

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

Try it: ticksPosition is set to 'bottom'

ticksFrequency Number 2

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

Try it: ticksFrequency is set to 1

tickSize Number 7

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

tickLabelFormatFunction Function null

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

tooltip Boolean false

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

Try it: tooltip is set to true

tooltipHideDelay Numer 500

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

Try it: tooltipHideDelay is set to 2000

tooltipPosition String "near"

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

Try it: tooltipPosition is set to "far"

tooltipFormatFunction Function null

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

Try it: tooltipFormatFunction is set to custom function

value Number/Object 0

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

Try it: value is set to 5

values Array [0, 10]

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

Try it: values is set to [5,15]

width Number/String 300

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

Try it: width is set to 300

change Event

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

Try it: Bind to the change event by type: jqxSlider.

created Event

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

Try it: Bind to the created event by type: jqxSlider.

slide Event

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

Try it: Bind to the slide event by type: jqxSlider.

slideStart Event

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

Try it: Bind to the slideStart event by type: jqxSlider.

slideEnd Event

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

Try it: Bind to the slideEnd event by type: jqxSlider.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroy the jqxSlider.

decrementValue Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the decrementValue method.

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

Try it: invoke the decrementValue method of the jqxSlider.

disable Method

Disabling the slider.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the disable method.

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

Try it: disables the jqxSlider.

enable Method

Enables the slider.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the enable method.

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

Try it: enables the jqxSlider.

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

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

Try it: focuses the jqxSlider.

getValue Method

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..

Parameter	Type	Description
None

Return Value
Number

Code example

Invoke the getValue method.

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

Try it: gets the value in the jqxSlider.

incrementValue Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the incrementValue method.

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

Try it: invoke the incrementValue method of the jqxSlider.

setValue Method

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.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the setValue method.

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

Try it: sets the value in the jqxSlider.

val Method

Sets or gets the value.

Parameter	Type	Description
value	String

Return Value
String

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

Try it: sets the value in the jqxSlider.

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code example

Code example

Code example

Code examples

Code example

Code example

Code example

Code example