With the coerce property true and clicking the track, the thumb and value are moved and set to the nearest value allowed by the interval property.

Code examples

Set the coerce property.

 let slider = document.querySelector('jqx-slider');

 slider.coerce = false;

Get the coerce property.

 let slider = document.querySelector('jqx-slider');

 let coerce = slider.coerce;

Sets or gets the char to use as the decimal separator in numeric values.

Code examples

Set the decimalSeparator property.

 let slider = document.querySelector('jqx-slider');

 slider.decimalSeparator = '.';

Get the decimalSeparator property.

 let slider = document.querySelector('jqx-slider');

 let decimalSeparator = slider.decimalSeparator;

Enables or disables the widget.

Code examples

Set the disabled property.

 let slider = document.querySelector('jqx-slider');

 slider.disabled = false;

Get the disabled property.

 let slider = document.querySelector('jqx-slider');

 let disabled = slider.disabled;

Determines what values the thumb snaps to.

Code examples

Set the interval property.

 let slider = document.querySelector('jqx-slider');

 slider.interval = 3;

Get the interval property.

 let slider = document.querySelector('jqx-slider');

 let interval = slider.interval;

Sets the direction of the slider. If is true - positions of the slider's begin and end are changed.

Code examples

Set the inverted property.

 let slider = document.querySelector('jqx-slider');

 slider.inverted = false;

Get the inverted property.

 let slider = document.querySelector('jqx-slider');

 let inverted = slider.inverted;

A callback function that can be used to format the values displayed on the slider labels and tooltip.

Code examples

Set the labelFormatFunction property.

 let slider = document.querySelector('jqx-slider');

 slider.labelFormatFunction = function (value) { return value + '$'; };

Get the labelFormatFunction property.

 let slider = document.querySelector('jqx-slider');

 let labelFormatFunction = slider.labelFormatFunction;

Sets or gets the widget's label visibility. Possible values: 'all', 'endPoints', 'none'.

Code examples

Set the labelsVisibility property.

 let slider = document.querySelector('jqx-slider');

 slider.labelsVisibility = 'none';

Get the labelsVisibility property.

 let slider = document.querySelector('jqx-slider');

 let labelsVisibility = slider.labelsVisibility;

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the language property.

 let slider = document.querySelector('jqx-slider');

 slider.language = 'fr';

Get the language property.

 let slider = document.querySelector('jqx-slider');

 let language = slider.language;

Enables/disables the usage of logarithmic scale in the widget.

Code examples

Set the logarithmicScale property.

 let slider = document.querySelector('jqx-slider');

 slider.logarithmicScale = false;

Get the logarithmicScale property.

 let slider = document.querySelector('jqx-slider');

 let logarithmicScale = slider.logarithmicScale;

Sets or gets the maximum value of the widget.

Code examples

Set the max property.

 let slider = document.querySelector('jqx-slider');

 slider.max = 50;

Get the max property.

 let slider = document.querySelector('jqx-slider');

 let max = slider.max;

Sets or gets the type of used mechanical action. Possible values: 'switchUntilReleased', 'switchWhenReleased', 'switchWhileDragging'.

Code examples

Set the mechanicalAction property.

 let slider = document.querySelector('jqx-slider');

 slider.mechanicalAction = 'switchUntilReleased';

Get the mechanicalAction property.

 let slider = document.querySelector('jqx-slider');

 let mechanicalAction = slider.mechanicalAction;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 let slider = document.querySelector('jqx-slider');

 slider.messages = { "de": { "missingReference": "jqxSlider: Fehlende Bezugnahme auf {{files}}.", "significantPrecisionDigits": "jqxSlider: Die Eigenschaften significantDigits und precisionDigits koennen nicht gleichzeitig eingestellt werden." } };

Get the messages property.

 let slider = document.querySelector('jqx-slider');

 let messages = slider.messages;

Sets or gets the minimum value of the widget.

Code examples

Set the min property.

 let slider = document.querySelector('jqx-slider');

 slider.min = 50;

Get the min property.

 let slider = document.querySelector('jqx-slider');

 let min = slider.min;

Sets the orientation of the widget. Possible values: 'horizontal', 'vertical'.

Code examples

Set the orientation property.

 let slider = document.querySelector('jqx-slider');

 slider.orientation = 'horizontal';

Get the orientation property.

 let slider = document.querySelector('jqx-slider');

 let orientation = slider.orientation;

Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.

Code examples

Set the precisionDigits property.

 let slider = document.querySelector('jqx-slider');

 slider.precisionDigits = 6;

Get the precisionDigits property.

 let slider = document.querySelector('jqx-slider');

 let precisionDigits = slider.precisionDigits;

Enables/disables the slider to be in range mode. If is set to true, the range is represented between two thumbs.

Code examples

Set the rangeSlider property.

 let slider = document.querySelector('jqx-slider');

 slider.rangeSlider = false;

Get the rangeSlider property.

 let slider = document.querySelector('jqx-slider');

 let rangeSlider = slider.rangeSlider;

When the slider is read only the users cannot drag or click in the fill of the slider.

Code examples

Set the readonly property.

 let slider = document.querySelector('jqx-slider');

 slider.readonly = true;

Get the readonly property.

 let slider = document.querySelector('jqx-slider');

 let readonly = slider.readonly;

Sets the position of the widget's scales. Possible values: 'near', 'far', 'both', 'none'.

Code examples

Set the scalePosition property.

 let slider = document.querySelector('jqx-slider');

 slider.scalePosition = 'both';

Get the scalePosition property.

 let slider = document.querySelector('jqx-slider');

 let scalePosition = slider.scalePosition;

Sets the type of the slider's scale. Possible values: 'floatingPoint', 'integer'.

Code examples

Set the scaleType property.

 let slider = document.querySelector('jqx-slider');

 slider.scaleType = 'floatingPoint';

Get the scaleType property.

 let slider = document.querySelector('jqx-slider');

 let scaleType = slider.scaleType;

Enables/disables scientific notation.

Code examples

Set the scientificNotation property.

 let slider = document.querySelector('jqx-slider');

 slider.scientificNotation = true;

Get the scientificNotation property.

 let slider = document.querySelector('jqx-slider');

 let scientificNotation = slider.scientificNotation;

Enables/disables displaying of the buttons.

Code examples

Set the showButtons property.

 let slider = document.querySelector('jqx-slider');

 slider.showButtons = false;

Get the showButtons property.

 let slider = document.querySelector('jqx-slider');

 let showButtons = slider.showButtons;

Enables/disables displaying of the tooltip.

Code examples

Set the showTooltip property.

 let slider = document.querySelector('jqx-slider');

 slider.showTooltip = false;

Get the showTooltip property.

 let slider = document.querySelector('jqx-slider');

 let showTooltip = slider.showTooltip;

Enables/disables displaying of the units.

Code examples

Set the showUnit property.

 let slider = document.querySelector('jqx-slider');

 slider.showUnit = false;

Get the showUnit property.

 let slider = document.querySelector('jqx-slider');

 let showUnit = slider.showUnit;

Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.

Code examples

Set the significantDigits property.

 let slider = document.querySelector('jqx-slider');

 slider.significantDigits = 2;

Get the significantDigits property.

 let slider = document.querySelector('jqx-slider');

 let significantDigits = slider.significantDigits;

Sets or gets the position of the ticks in jqxSlider widget. Possible values: 'scale', 'track'.

Code examples

Set the ticksPosition property.

 let slider = document.querySelector('jqx-slider');

 slider.ticksPosition = 'scale';

Get the ticksPosition property.

 let slider = document.querySelector('jqx-slider');

 let ticksPosition = slider.ticksPosition;

Sets or gets the visibility of the ticks. Possible values: 'major', 'minor', 'none'.

Code examples

Set the ticksVisibility property.

 let slider = document.querySelector('jqx-slider');

 slider.ticksVisibility = 'none';

Get the ticksVisibility property.

 let slider = document.querySelector('jqx-slider');

 let ticksVisibility = slider.ticksVisibility;

Sets or gets the position of the tooltip in jqxSlider widget. Possible values: 'near', 'far'.

Code examples

Set the tooltipPosition property.

 let slider = document.querySelector('jqx-slider');

 slider.tooltipPosition = 'near';

Get the tooltipPosition property.

 let slider = document.querySelector('jqx-slider');

 let tooltipPosition = slider.tooltipPosition;

Sets or gets the name of unit used in jqxSlider widget.

Code examples

Set the unit property.

 let slider = document.querySelector('jqx-slider');

 slider.unit = 'cm';

Get the unit property.

 let slider = document.querySelector('jqx-slider');

 let unit = slider.unit;

Sets or gets the value of the jqxSlider widget. The property is used when the rangeSlider property is set to false.

Code examples

Set the value property.

 let slider = document.querySelector('jqx-slider');

 slider.value = 100;

Get the value property.

 let slider = document.querySelector('jqx-slider');

 let value = slider.value;

Sets or gets the value of the jqxSlider widget. The property is used when the rangeSlider property is set to true.

Code examples

Set the values property.

 let slider = document.querySelector('jqx-slider');

 slider.values = ['20', '70'];

Get the values property.

 let slider = document.querySelector('jqx-slider');

 let values = slider.values;

Sets or gets the word length. Applicable only when scaleType is 'integer'. Possible values: 'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64'.

Code examples

Set the wordLength property.

 let slider = document.querySelector('jqx-slider');

 slider.wordLength = 'int16';

Get the wordLength property.

 let slider = document.querySelector('jqx-slider');

 let wordLength = slider.wordLength;

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

Code examples

Bind to the change event by type: jqxSlider

 let slider = document.querySelector('jqx-slider'); 

 slider.addEventListener('change', function (event) {
     // event handling code goes here.
 }
 

Focuses the slider.

Code examples

Invoke the focus method.

 let slider = document.querySelector('jqx-slider'); 

 slider.focus(); 

Gets the optimal size of the widget.

Code examples

Invoke the getOptimalSize method.

 let slider = document.querySelector('jqx-slider'); 

 slider.getOptimalSize(); 

Get/set the value of the slider.

Code examples

Invoke the val method.

// Get the value.

 let slider = document.querySelector('jqx-slider'); 

 let val = slider.val(); 

// Set the value.

 let slider = document.querySelector('jqx-slider'); 

 slider.val('10');