HTMLスライダ入力を動的に更新する

Question

私はこれまでHTMLを使用したことがなく、学術プロジェクトの一環として単純なウェブサイトを作成しています。私はtyped.jsを使用して、ユーザーに出力の速度を選択させています。現時点では、javascriptコードで使用されている値と相関する「低速/中速/高速」のオプション付きドロップダウンボックスを使用していますが、代わりにrange inputを実装しようとしています。私は、スライダが変更されたときに、自動的に選択された数値を更新するスライダのラベルが必要ですが、これを達成する方法については固執しています。どんな助けもありがとう！

Answer 1

oninput属性を使用して、JavaScript関数を呼び出してlabelを更新してください。

HTML

<label id="demo"></label><br> 
<input oninput="myFunction()" type="range" id="myRange" value="90"> 

JS

<script> 
function myFunction() { 
    var x = document.getElementById("myRange").value; 
    document.getElementById("demo").innerHTML = x; 
} 
</script> 

Answer 2

はここであなたが探しているものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input oninput="rangeFunction()" type="range" id="range" value="20" min="0" max="360"> 
 

 
<label id="result"></label> 
 
<script>  
 
window.onload = function() {rangeFunction()}; //display default range value in #result 
 
    
 
function rangeFunction() { 
 
    var x = document.getElementById("range").value; //get current range value 
 
    document.getElementById("result").innerHTML = x; // display current range value in #result 
 
} 
 
</script>