Range mode

In the range mode, the slider displays two thumbs to select the start and end values of a range.

To enable the range mode, set the range property to true and pass an array with the start and end values of the range to the value property:

const slider = new dhx.Slider("slider_container", {
    min: 0,
    max: 100,
    step: 1,
    range: true,
    value: [25, 75]
});

Related sample: Slider. Range mode of the Slider

Like the default slider, a range slider works in the horizontal, vertical, and inverse modes. You can configure the scale with the tick options and add labels to the slider thumbs.

The range slider supports all Slider configuration properties and the standard Slider API.

API specificity

Configuration

In the range mode, the value option must be an array with two values, one for each thumb.

Get/set value

• The getValue() method returns an array with a pair of values for a slider in the range mode.
• The setValue() method takes an array as the first parameter.