DevExtreme React - 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