Question

I have a set of inputs and for each value that I’m inputting I have a “range” slider and a “number” input. I have a little bit of JS that is called by both the slider and the number field using the onchange=”send(input_id, input_kind, this.value)” attribute for each input.
If the slider moved I update the number and if the number changed I update the slider.

This is fine for the slider as as soon as one moves it, the number starts tracking along. When one adjusts the number with the little up/down arrows or types numbers the slider does not update. The JS is not called until another field is selected, i.e.. the input loses focus then it passes it’s data to me bind{k, d, v} function.

HTML:

            <div class="number-pair">
                <sub-title>X-Position</sub-title><br />
                <input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'slider', parseFloat(this.value))" />
                <input id="/layout/1/number" class="number-box" type="number" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'number', parseFloat(this.value))" /><br />    
            </div>

JS:

        function bind(id, control, v)
        { 
            if (control=="slider")
            {
            if (console) console.log("It's a slider");
                e = document.getElementById("/layout/1/number");
                if (e)
                {
                    e.value = v;
                }
            } else if (control=="number")
            {
            if (console) console.log("It's a float");                   
                e = document.getElementById("/layout/1/slider");
                if (e)
                {
                    e.value = v;
                }
            }
        }

How can I get a more responsive binding for using number arrows?

N.B. I’m not just binding the two inputs to each other but to on-screen effects elsewhere so move responsive binding is desirable in that context not just the slider which I could live with.
Also I’m using literals to find update the paired value in my JS but literals will be replaced with a dynamic expression so I can bind a whole range of slider/text number input pairs.

Answer 1

On the input fields, bind to the onkeypress, rather than the onchange event, because the onchange event isn’t called until the control loses focus. To trap arrow presses, bind to the onclick event.