Knockout.js 绑定滑块范围输入

Question

我正在尝试将Input Range Object 与 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

如this question所述，拖动时需要监听oninput事件获取新值。

即使没有记录，Google 的快速搜索也会导致 Knockout.js supporting valueUpdate: 'input'。

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'"/>