UI Widgets RangeSlider

A widget that enables a user to select a range of numeric values.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxRangeSlider widget allows a user to specify a range of values.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxRangeSlider widget using the Knockout approach.

HTML
<div data-bind="dxRangeSlider:{min:0, max:100, start:rageStart, end:rangeEnd}"></div>

The widget has min and max options that specify the boundary values the range can take on. The current boundary values of the selected range are specified via the start and end options. Declare observable variables and pass them to the start and end options to update their values each time range values change.

JavaScript
var rangeStart = ko.observable(0);
var rangeEnd = ko.observable(10);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxRangeSlider widget is related to the Editors category. So read an overview of the features that are common for editors in the Common Tasks topic of the Editors article.
Show Example:
jQuery
<div data-bind="dxRangeSlider: { min:50, max: 100, start: rangeStart, end: rangeEnd }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">From</div>
    <div class="dx-field-value" data-bind="text: rangeStart"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">To</div>
    <div class="dx-field-value" data-bind="text: rangeEnd"></div>
  </div>
</div>
rangeStart = ko.observable(65);
rangeEnd = ko.observable(85);

Configuration

An object defining configuration options for the dxRangeSlider widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.