This example demonstrates passing a single option to bind against the value of the Slider widget.

<input data-bind="kendoSlider: myValue" />
<hr/>
Value: <strong data-bind="text: myValue"> </strong>

var ViewModel = function() {
   this.myValue = ko.observable(4);
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute with value now being explicitly specified. The Set to 50 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 50</button>
<button data-bind="click: increaseMax">Increase Max</button>
<button data-bind="click: decreaseMin">Decrease Min</button>
<hr/>
<input data-bind="kendoSlider: { value: myValue, enabled: enabled, min: min, max: max }" />
<hr/>
Value: <strong data-bind="text: myValue"> </strong>

var ViewModel = function() {
    this.max = ko.observable( 100 );
    this.min = ko.observable( 0 );
    this.myValue = ko.observable(40);
    this.enabled = ko.observable(true);
    this.setToDefault  = function() {
        this.myValue(50);
    };
    this.increaseMax = function() {
        this.max( this.max() + 10 );
    };
    this.decreaseMin = function() {
        this.min( this.min() - 10 );
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoSlider.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="kendoSlider: myValue" />
<hr/>
Value: <strong data-bind="text: myValue"> </strong>

var ViewModel = function() {
    this.myValue = ko.observable(40);
};

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

                            ko.applyBindings(new ViewModel());