Knockout.js绑定滑块范围输入

Question

我正在尝试使用Knockout.js 绑定输入范围对象.值绑定似乎运行良好,但我无法找到一种方法来拖动滑块时更新observable.只有当我释放鼠标时才会更新observable,因为我创建了一个音量滑块,所以给出了糟糕的体验.

我已经尝试了每个valueUpdate选项,没有任何结果.它们似乎仅用于文本输入.

var ViewModel = function() { 
    this.rangeValue = ko.observable(50);
};
 
ko.applyBindings(new ViewModel()); // This makes Knockout get to work

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: rangeValue"/>
<input type="range" data-bind="value: rangeValue, valueUpdate: 'change'"/>

Answer 1

如中所述 本问题所述,您需要在拖动时收听oninput事件以获取新值.

快速谷歌搜索导致Knockout.js 支持valueUpdate:'输入',即使没有记录.

var ViewModel = function() { 
    this.rangeValue = ko.observable(50);
};
 
ko.applyBindings(new ViewModel()); // This makes Knockout get to work

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: rangeValue"/>
<input type="range" data-bind="value: rangeValue, valueUpdate: 'input'"/>