input type range show range value in input type number in html

Question

How do I change the following code so that I can use it for multiple inputs of number type?

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

Ilya Sheershoff · Accepted Answer · 2021-04-26 14:20:59Z

2

So. What I'd do - I'd expand the function so it would work with several IDs. Something like that:

function updateTextInput(val, elId) {
          document.getElementById(elId).value=val; 
        }

<input type="range" name="rangeInput1" min="0" max="100" onchange="updateTextInput(this.value, 'textInput1');">
<input type="text" id="textInput1" value="">
<br/>
<input type="range" name="rangeInput2" min="0" max="100" onchange="updateTextInput(this.value, 'textInput2');">
<input type="text" id="textInput2" value="">

answered Apr 26, 2021 at 14:20

Ilya Sheershoff

5095 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ManWithNoName Over a year ago

Replacing "onchange" event by "onmousemove" event allow to see the selected value in real time.

Collectives™ on Stack Overflow

input type range show range value in input type number in html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related