Knockout.js bind slider range input

Question

I'm trying to bind an Input Range Object with Knockout.js. The value binding seems to works well but I can't find a way to update the observable while dragging the slider. The observable is updated only when I release the mouse, giving a bad experience since I'm creating a volume slider.

I've tried every valueUpdate option without any result. They seems made just for text 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: 'change'"/>

@RoyJ so, you know a way to set valueUpdate to 'input' or something like that? — Jamby
@RoyJ nevermind, valueUpdate: 'input' seems to exist even if not documented. Thanks for the tip! — Jamby

Jamby Jamby · Accepted Answer · 2015-09-28T15:01:18

As stated in this question, you need to listen to the oninput event to get the new value while dragging.

A fast Google search resulted in Knockout.js supporting valueUpdate: 'input' even if not documented.

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 bind slider range input

1 Answers