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>