RangeSlider

Description

The RangeSlider widget allows a user to choose a start and end to a range of values.

Official Kendo UI RangeSlider documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates passing a single option to bind against the values array of the RangeSlider widget.

<div data-bind="kendoRangeSlider: myValues">
    <input />
    <input />
</div>
<hr/>
Low: <strong data-bind="text: myValues()[0]"> </strong>&nbsp;
High: <strong data-bind="text: myValues()[1]"> </strong>
var ViewModel = function() {
   this.myValues = ko.observableArray([2, 6]);
};

                            ko.applyBindings(new ViewModel());

Low:   High:

This example demonstrates passing additional options in the data-bind attribute with values now being explicitly specified. The Set to 40, 60 button makes an update to the view model to show that the widget responds accordingly.

<input data-bind="checked: enabled" type="checkbox" /> Enabled<br/>
<button data-bind="click: setToDefault">Set to 40, 60</button>
<hr/>
<div data-bind="kendoRangeSlider: { values: myValues, enabled: enabled, min: 0, max: 100 }">
    <input />
    <input />
</div>
<hr/>
Low: <strong data-bind="text: myValues()[0]"> </strong>&nbsp;
High: <strong data-bind="text: myValues()[1]"> </strong>
var ViewModel = function() {
    this.myValues = ko.observableArray([20, 80]);
    this.enabled = ko.observable(true);
    this.setToDefault  = function() {
        this.myValues([40, 60]);
    };
};

                            ko.applyBindings(new ViewModel());
Enabled


Low:   High:

This example demonstrates setting global options in ko.bindingHandlers.kendoRangeSlider.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<input data-bind="checked: enabled" type="checkbox" /> Enabled<br/>
<button data-bind="click: setToDefault">Set to 40, 60</button>
<hr/>
<div data-bind="kendoRangeSlider: { values: myValues, enabled: enabled, min: 0, max: 100 }">
    <input />
    <input />
</div>
<hr/>
Low: <strong data-bind="text: myValues()[0]"> </strong>&nbsp;
High: <strong data-bind="text: myValues()[1]"> </strong>
var ViewModel = function() {
    this.myValues = ko.observableArray([20, 80]);
    this.enabled = ko.observable(true);
    this.setToDefault  = function() {
        this.myValues([40, 60]);
    };
};

ko.bindingHandlers.kendoRangeSlider.options = {
    min: 0,
    max: 100
};

                            ko.applyBindings(new ViewModel());
Enabled


Low:   High:

Live Options

The kendoRangeSlider.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the slider

values

An array or observableArray containing the two selected values (upper and lower)