バーをスライドさせてスパンの値を更新

Question

バーをスライドさせてスパンの値を更新する方法はありますか？現在のところ、私はバーを手放すとすぐに値が更新されますが、スライドするにつれ更新する必要があります。これはjQueryを使用しないと可能ですか？ここで

は、私が今持っているもののJSFiddleです：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>

Answer 1

確かに、代わりにoninputイベントを使用します。

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>

を

oninputはIE10ではサポートされていないため、onchangeイベントも使用する必要があることに注意してください。

Answer 2

はい、の入力をイベントでスライドして更新できます。 は=

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

Answer 3

可能jQueryのオプション「（this.value）を調整」oninput入れ

を（将来的にはここで自分の道を見つけて、それがjQのか、純粋な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>