CODEWITHSUNDEEP
javascripthtml
Willem van der Veen
Willem van der Veen

Reputation: 36580

input range updating value while changing value

I know how to create an <input> range which updates the value after a user is done chaning. It will trigger a javascript function when it is done with changing the range bar. For example:

function updateTextInput(val) {
  let output = document.getElementById('umjp_minutes');
  output.innerText = val;
}
<input id="umjp_minutePicker" type="range" min="15" max="100" onchange="updateTextInput(this.value);">
<span id="umjp_minutes">40</span>

To give a user a more rich experience I want the range <input> to be updated while the user is changing. What is the most simple way to accomplish this?

Upvotes: 1

Views: 1722

Answers (1)

Andrew Evt
Andrew Evt

Reputation: 3689

Change onchange event to oninput like here:

function updateTextInput(val) {
  let output = document.getElementById('umjp_minutes');
  output.innerText = val;
}
<input id="umjp_minutePicker" type="range" min="15" max="100" oninput="updateTextInput(this.value);">
<span id="umjp_minutes">40</span>

You can check all DOM events information and description here.

Upvotes: 8

Related Questions