Как получить значение input type=“range”

218

02 сентября 2018, 03:50

Есть у меня <input>:

<form action="">
    <input type="range" value="25" max="100" min="0">
</form>

У которого я двигаю бегунок. Как мне получить значение, текущего положения бегунка?

Answer 1

document.getElementById("myrange").addEventListener("change", function() { 
  console.log(this.value); 
});

<input id="myrange" type="range" value="25" max="100" min="0">

Answer 2

Если использовать jQuery:

$('.result').html($('input[type="range"]').val()); 
 
$(document).on('input change', 'input[type="range"]', function() { 
  $('.result').html($(this).val()); 
});

.result { 
  height: 30px; 
  border:1px solid; 
  margin: 2rem 0; 
  width: 100px; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<form action=""> 
    <input type="range" value="25" max="100" min="0"> 
</form> 
   
  <div class="result"></div>