Knockout.js 绑定滑块范围输入

Question

我正在尝试将 Input Range Object 与 Knockout.js 绑定。值绑定似乎运行良好，但我找不到在拖动滑块时更新可观察对象的方法。 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'"/>

Knockout.js 绑定滑块范围输入

Knockout.js bind slider range input

data-binding

slider

knockout.js