4

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'"/>
Jamby
  • 1,886
  • 2
  • 20
  • 30
  • 1
    http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging – Roy J Sep 28 '15 at 14:26
  • @RoyJ so, you know a way to set valueUpdate to 'input' or something like that? – Jamby Sep 28 '15 at 14:49
  • @RoyJ nevermind, valueUpdate: 'input' seems to exist even if not documented. Thanks for the tip! – Jamby Sep 28 '15 at 14:56

1 Answers1

8

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'"/>
Jamby
  • 1,886
  • 2
  • 20
  • 30
  • 1
    It's documented here: http://knockoutjs.com/documentation/value-binding.html#Parameters "Note that this event is only raised by reasonably modern browsers (e.g., IE 9+)." – Roy J Sep 28 '15 at 16:01
  • @RoyJ I really don't know why I didn't see it before.. thank you! – Jamby Sep 28 '15 at 17:15