Knockout-jQueryUI

Slider.html

Drag a handle to select a numeric value.

Parameters

For each of the widget's options the binding has a corresponding option with the same name. These can be set to static values, or bound either to normal or to observable properties of the viewmodel.

For each of the widget's events the binding has a corresponding option with the same name. These can be set to functions. When invoked the value of the this keyword evaluates to the viewmodel.

widget

Should be bound to one of the viewmodel's writeable observables. The binding will write a jQuery object containing the binding's DOM element into it. The primary use for this option is to invoke the widget's methods on the element.

value [two-way binding]

Position of the slider's first handle.

values [two-way binding]

Position of the slider's handles.

realtime

Controls when the viewmodel's value/values observables are updated. If set to true then the observables are updated during the sliding. If set to false or is absent then they are updated when the sliding finishes.

Example

<div style="width: 200px;" data-bind="slider: { values: values, realtime: true }"></div>
<p>
  <input type="text" data-bind="value: value1" />
  <input type="text" data-bind="value: value2" />
  <input type="text" data-bind="value: value3" />
</p>

var ViewModel = function () {
  this.value1 = ko.observable('25');
  this.value2 = ko.observable('50');
  this.value3 = ko.observable('75');
  this.values = ko.computed({
    read: function() {
      return [this.value1(), this.value2(), this.value3()];
    },
    write: function(newValue) {
      this.value1(newValue[0]);
      this.value2(newValue[1]);
      this.value3(newValue[2]);
    },
    owner: this
  });
};