HTML:
<input type="range" oninput="myFunction(this.value)" value="0" min="0" max="1" step="0.01" />
<span id="currentValue">0</span>
Javascript:
function myFunction(myValue){
document.getElementById("currentValue").innerHTML = myValue;
}
Question
Is there a way to send a range-type input's value to another element, for example a div, in real time?
$(function(){
$('#mySlider').change(function(){
$('#currentValue').html(this.value);
});
});
example: http://jsfiddle.net/eWyKH
Solution
HTML:
<input type="range" oninput="myFunction(this.value)" value="0" min="0" max="1" step="0.01" />
<span id="currentValue">0</span>
Javascript:
function myFunction(myValue){
document.getElementById("currentValue").innerHTML = myValue;
}
OTHER TIPS
You can do the following using jQuery
<input type="range" class="form-range" oninput="sliderAmount(this.value)" name="amount" min="500" value="500" step="500" max="100000">
<div class="d-flex justify-content-between">
<div class="min-val" style="font-size: 14px;">500</div>
<div class="max-val" style="font-size: 14px;">100000</div>
</div>
<h3 class="d-flex justify-content-center"><b><span id="displayValue">500</span></b></h3>
<script>
function sliderAmount(value) {
$('#displayValue').text(value)
}
</script>