benjo benjo - 2 months ago 20
jQuery Question

Range input and progress bar issue with increment

I'm trying to make the range slider sliding to fill progress element from 0-100
but in the range slider I have different value in the min and the max.

So it cannot be done in a simple on change jquery code...

I cant figure out the way for increment the numbers so it will work smoothly, or maybe my approach is not the one to do it, please advice ?



$(document).on("input change", "#rangeSlider" ,function() {

var valNumb = parseInt($(this).val());

var newVal = valNumb - 18;
newVal = newVal++;

$(".rangeProgress").val(newVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range-slider" type="range" id="rangeSlider" name="range" value="18" min="18" max="99">

<progress class="rangeProgress" value="0" max="100"></progress>




Answer Source

You should do some basic math calculate the percentage based on the min and max attributes:

$(document).on("input change", "#rangeSlider" ,function() {

        var valNumb = parseInt($(this).val()) - $(this).attr('min');
        var progress = valNumb / ($(this).attr('max') - $(this).attr('min')) * 100

        $(".rangeProgress").val(progress);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="range-slider" type="range" id="rangeSlider" name="range" value="18" min="18" max="99">

<progress class="rangeProgress" value="0" max="100"></progress>