Update value in span as I slide the bar

Question

Is there a way to update the value in the span as I slide the bar? Currently the value will update as soon as I let go of the bar but I need it to update as it slides. Is this possible without using jQuery?

Here is a JSFiddle of what I have right now: https://jsfiddle.net/v4d7yoo3/

window.adjust = function(newWidth) {
  let ad = document.getElementsByClassName('value')[0];
  console.log(ad);
  ad.innerHTML = newWidth;
}

<div class="scroll-control-vertical" style="float: left;">
  <input type="range" value="100" min="20" max="100" onchange="adjust(this.value)" style="-webkit-appearance: slider-
     vertical; transform: rotate(180deg);" />
</div>
<span class="value">100</span>

Possible duplicate: https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging — Abdullah Dibas, Sep 27 '17 at 19:33

score 2 · Accepted Answer · answered Sep 27 '17 at 19:32

Sure, use the oninput event instead:

window.adjust = function (newWidth) {
    let ad = document.getElementsByClassName('value')[0];
    ad.innerHTML = newWidth;
}

<div class="scroll-control-vertical" style="float: left;">
  <input type="range" value="100" min="20" max="100" onchange="adjust(this.value)" oninput="adjust(this.value)" style="-webkit-appearance: slider-vertical; transform: rotate(180deg);"/>
</div>
<span class="value">100</span>

Notice that we need to use the onchange event as well, since oninput is not supported in IE10.

score 0 · Answer 2 · answered Sep 27 '17 at 19:40

Yes you can update by sliding by using the oninput event. Put oninput="adjust(this.value)"

<div class="scroll-control-vertical" style="float: left;">
            <input type="range" value="100" min="20" max="100" onchange="adjust(this.value)" oninput="adjust(this.value)" style="-webkit-appearance: slider-vertical; transform: rotate(180deg);"/>
</div>
<span class="value">100</span>

score 0 · Answer 3 · answered Sep 27 '17 at 19:58

A possible jQuery option (for those that find their way here in the future and don't care if it's jQ or pure JS)

$('input').on('input', function() {
  $('.value').text($('input').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-control-vertical" style="float: left;">
  <input type="range" value="100" min="20" max="100" style="-webkit-appearance: slider-vertical; transform: rotate(180deg);"/>
</div>
<span class="value">100</span>

Update value in span as I slide the bar

3 Answers3