淘汰赛js jquery范围滑块&& 2个输入答案

【问题标题】：Knockout js jquery range slider && 2 inputs淘汰赛js jquery范围滑块&& 2个输入
【发布时间】：2012-11-20 21:15:32
【问题描述】：

我需要一些帮助。我有一个代码http://jsfiddle.net/ZNvWR/19/。我是淘汰赛的新手，我找不到任何解决方案。

那么，如何重写此代码以获取工作输入（更改输入中的值会更改滑块值）？

<div data-bind="jqSlider: percent, jqOptions: { min: 0, max: 100, range:true }"></div>
<hr/>
Percent: <input data-bind="value: percent()[0]" />
Percent: <input data-bind="value: percent()[1]" />

ko.bindingHandlers.jqSlider = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    //initialize the control
    var options = allBindingsAccessor().jqOptions || {};
    $(element).slider(options);

    //handle the value changing in the UI
    ko.utils.registerEventHandler(element, "slide", function() {
        //would need to do some more work here, if you want to bind against non-observables
        var observable = valueAccessor();
        observable($(element).slider("values"));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).slider("destroy");
    });
  },
  //handle the model value changing
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).slider("values", value);   
  }
};

var viewModel = {
    percent: ko.observableArray([10,50])
};
ko.applyBindings(viewModel)

【问题讨论】：

标签： javascript jquery jquery-ui knockout.js jquery-ui-slider

【解决方案1】：

我刚刚用一个滑块帮助了另一个 SO 用户，可以像这样改变它来做你想做的事

http://jsfiddle.net/N9uwx/3/

<input data-bind="value: min" /><input data-bind="value: max" /><div data-bind="slider: { min: min, max: max }, sliderOptions: {min: 0, max: 100, step: 1}"></div>

【讨论】：