Model 如何绑定值和事件剑道滑块和剑道可观察类

我试图将输入框绑定到剑道滑块上，这就是我的工作原理。如果你有更好的方法来实现这样的要求，请分享。谢谢。

HTML

<div id="testID" class="control-group">
    <label class="control-label" for="">Weekly Rent Amount($)</label>
    <div class="controls">
        <div data-role="rangeslider"
             data-min="1"
             data-max="1000"
             data-smallstep="5"
             data-largestep="10"
             data-tickplacement="both"
             data-bind="value: rent, events:{change: rentOnChange}">
            <input />
            <input />
        </div>
        <input data-bind="value: rentMin, events:{change: rentOnChange}" />
        <input data-bind="value: rentMax, events:{change: rentOnChange}" />
    </div>
</div>

那么：

HTML:

不需要解释！：-）

---

简单而优雅，你不这么认为吗？

我正在做这个，但问题是，如果我在文本框中键入值，滑块值也会改变。

var viewModel = kendo.observable({
    sliderValue: 5,
    rentMin:"",
    rentMax:"",
    rent:function(){
        return [this.get("rentMin"),this.get("rentMax")]
    },
    rentOnChange:function(e){
        if(typeof e.values==="undefined"){
            this.set("rent",[this.get("rentMin"),this.get("rentMax")])
        }else{
            var rentval = e.values;
            this.set("rentMin",rentval[0]);
            this.set("rentMax",rentval[1])
        }


    }
});
kendo.bind($("#testID"), viewModel);

<div id="testID" class="control-group">
    <label class="control-label" for="">Weekly Rent Amount($)</label>
    <div class="controls">
        <div data-role="rangeslider"
             data-min="1" data-max="1000"
             data-smallstep="5" data-largestep="10"
             data-tickplacement="both"
             data-bind="value : rent">
            <input/>
            <input/>
        </div>
        <input data-bind="value: rent[0]"/>
        <input data-bind="value: rent[1]"/>
    </div>
</div>

var viewModel = kendo.observable({
    rent: [ 323, 600 ]
});
kendo.bind($("#testID"), viewModel);