All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery RangeSlider - Overview

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

View Demo

The following code adds a simple RangeSlider to your page. The start and end properties specify the selected interval. The min and max properties 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 property.

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