Is it possible to link a Range and a Numerical HTML input?

Question

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" />

Answer 1

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" />