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:

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

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.
Back to top