UI Widgets Slider

A widget that allows a user to select a numeric value within a given range.

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

The dxSlider widget allows a user to specify a numeric value within a specified range.

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 dxSlider widget using the Knockout approach.

HTML
<div data-bind="dxSlider:{min:0, max:100, value: currentValue}"></div>

The widget has min and max options specifying the available range. The current value is specified using the value option. Declare an observable variable and pass it to the value option to update its value each time the selected value changes.

JavaScript
var currentValue = ko.observable(50);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxSlider 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="dxSlider: { min: 1, max: 99, value: currentValue }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Value</div>
    <div class="dx-field-value" data-bind="text: currentValue"></div>
  </div>
</div>
currentValue = ko.observable(50);

Configuration

An object defining configuration options for the dxSlider widget.

Methods

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

Events

This section describes events fired by this component.