Label with input range value

Question

Good afternoon. I’m using the BOOTSTRAP 4 specifically an input range like this:

<div class='col slider'>
    <label for="customRange3"><strong>BRIGHTNESS</strong><span class='float-right badge badge-primary lbval' id='brightnesslabel'>0</span></label>
    <input type="range" class="custom-range" min="-64" max="64" step="1" id="brightness">                       
</div>

and I have a java script that updates the Badge that is so :

<script>

        var slider = document.getElementById("brightness");
        var output = document.getElementById("brightnesslabel");
        output.innerHTML = slider.value;

        slider.oninput = function() {
          output.innerHTML = this.value;
        }    

</script>

I’m caught up in turning this function javascript in a function jquery using .each() because I want to copy these blocks to have several ranges and realize a .each(".slider")

Someone can help me ?

I’m trying to do it this way:

$( ".slider" ).each(function() {
   $( this + ' > .lbval').html($( this + ' .custom-range').val());
});

Answer 1

Function jQuery:

<script>
    $('input[type=range]').on('input', function () {
        $(this).trigger('change');
        $("#brightnesslabel").html($(this).val());
    });
</script>

If you want to take a specific range or class of them, just replace:

$('input[type=range]')

for #id or .class desired.

Answer 2

I used it this way but I’ll change it by the way you proposed:

$( ".slider" ).mousemove(function() {
    $(this).find('.lbval').html($(this).find('.custom-range').val());
});

posted the character of consultation and studies.