Number inputs and ranges valueUpdate in Knockoutjs

Question

I've been working on a project I need a number input and a slider see fiddle here http://jsfiddle.net/Dt7Ka/116/

<h2>Slider Demo</h2>

RAM: <input type="number" data-bind="value: ram,  valueUpdate: 'afterkeydown', attr: {max: 8192, min: 512, step: 1}" />
<div style="margin: 10px" data-bind="slider: ram, sliderOptions: {min: 512, max: 8192, range: 'min', step: 1}"></div>

In the case where someone want to manually enter a number (say 2048) I find that knockout goes into overkill and prevents me from entering 2048 correctly.

Suggestions?

Answer 1

It's because you have valueUpdate: 'afterkeydown' set. This causes the binding to try to update every time a key is pressed, and since you have a min of 512, trying to enter a value of 2 is going to fail.

You can't enter 2048 because it tries to update after the first key. If you just take our that part of the binding it will work fine.

<input type="number" data-bind="value: ram, attr: {max: 8192, min: 512, step: 1}" />

http://jsfiddle.net/Dt7Ka/118/