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

Was it helpful?

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

DEMO

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top