Skip to main content

Range mode

The range mode of slider presupposes the usage of two thumbs for selecting the starting and ending values of a range.

To enable the range mode, you need to set the range property to true and specify an array of two values - min and max values of the range:

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

The same as the default slider, a slider in the range mode works smoothly both in the horizontal and vertical modes, as well as in the inverse mode. You can manipulate the scale settings by adjusting the ticks-related options and use labels for its thumbs.

In short, the full set of Slider configuration properties can be applied to the range slider. All the standard Slider API is supported.

API specificity​

Configuration​

Note that the value option should have the array type and contain a pair of values for both thumbs.

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 as a first parameter an array, respectively.