Skip to main content

Work with Slider

The Slider API helps you control the functionality of the component through a set of handy methods.

Disabling/enabling Slider​

You can control the activity of the slider via the disable()/enable() methods:

// disable a slider on a page
slider.disable();

// make the slider active again
slider.enable();

Related sample: Slider. Disable/enable slider

Checking if a Slider is disabled​

To check if a slider is disabled, call the isDisabled() method:

slider.isDisabled(); // -> true/false

Related sample: Slider. Is disabled

Setting value​

While a user sets the value of a slider by dragging the thumb to the desired position, you can set the value from the code via the setValue() method:

slider.setValue(20);

Related sample: Slider. Set value

Getting value​

You can get the current value of Slider with the help of the getValue() method.

const value = slider.getValue(); // -> [20]
 
// for a range slider as an array
const value = slider.getValue(); // -> [20,50]

Related sample: Slider. Get value

In case you've set the value of Slider as an array where the first number is greater than the second one, e.g. [50,20], getValue() will return the value as an array with numbers in the ascending order, that is [20,50].

// sets value as an array (the first number is greater than the second one)
slider.setValue([50,20]);

// returns an array of numbers (the numbers are ascending)
const value = slider.getValue(); // -> [20,50]