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

Type: Object

The dxRangeSlider widget allows a user to specify a range of values. 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.

var rangeStart = ko.observable(0);
var rangeEnd = ko.observable(10);

To create a dxRangeSlider widget, add a div element with dxRangeSlider Knockout binding within the body of the required view.

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

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:


An object defining configuration options for the dxRangeSlider widget.


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


This section describes events fired by this component.