All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The RangeSlider is a widget that allows an end user to choose a range of numeric values. Basically, the RangeSlider is the Slider widget with a second handle added.

View Demo

The following code adds a simple RangeSlider to your page. The start and end options specify the selected interval. The min and max options limit the range of accepted values.

HTML
JavaScript
<div id="rangeSliderContainer"></div>
$(function() {
    $("#rangeSliderContainer").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60
    });
});

In addition, you can specify the step of RangeSlider values using the step option.

JavaScript
$(function() {
    $("#rangeSliderContainer").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60,
        step: 10
    });
});
See Also