UI Widgets Slider

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

Type: Object

The dxSlider widget allows a user to specify a numeric value within a specified range. 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);

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

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

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

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 members used to manipulate the object.