Is there a way to link the values of a <input type="range"> and an <input type="number">?

I would like to make changes to either the slider or to the numerical input and have both fields be updated. For some reason I have only been able to get an undefined value from the range element as of yet.

Here is my current JavaScript and HTML for this part of the document:

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Is there a way to link the values of a <input type="range"> and an <input type="number">?

I would like to make changes to either the slider or to the numerical input and have both fields be updated. For some reason I have only been able to get an undefined value from the range element as of yet.

Here is my current JavaScript and HTML for this part of the document:

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

• javascript
• jquery
• html
• input

4 Answers 4

It's not working because updateTextInput1(this.val) should be updateTextInput1(this.value):

function updateTextInput1(val) {
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

However, I'd suggest using unobtrusive JavaScript, though.

Just attach an input event to each element. In doing so, both elements will be in sync.

var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');

range.addEventListener('input', function (e) {
  field.value = e.target.value;
});
field.addEventListener('input', function (e) {
  range.value = e.target.value;
});

<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Or you could use a more compact approach and select the sibling element:

document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);

function updateValue (e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
}

<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

To display everytime the range or input text is changing you can use oninput and onchange on the input range, and also onkeypress and onchange on the input type text :

function updateTextInput1(val) {
  val = val > 100 ? 100 : val;
  val = val < 0 ? 0 : val;
  document.getElementById('range').value = val;
  document.getElementById('num1').value = val;
}

    <input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
    <input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />

The error is: this.val instead of this.value

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

You should bind event using js/jq. And to link both, you could target specific sibling element (or any other relevant transversal method):

$('.inputRange, .inputNumber').on('input', function(){
  $(this).siblings('.inputRange, .inputNumber').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />