How to get Bootstrap 5 range slider value "on slide"-CodePudding

I am wondering if it possible to get the value from a bootstrap 5 slider while sliding, i.e., if I press the mouse and slide the "handle" that I get the value continuously and not just when I release the "handle"?

Right now I am using a Bootstrap5 range slider and jQuery to detect a "change" in the slider and update a text span with the new value. And this change only happens when I release the mouse button on the new value, not showing possible values in between when the "handle" is sliding over them while have the mouse button pressed. Any suggestions on how to solve this?

My code looks like this:

<input type="range"  min="0" max="9" value="0" id="timerange">
<label >Time: <span id="timetext">0</span></label>

$('#timerange').on('change' ,function(){
   $('#timetext').text($('#timerange').val());
});

CodePudding user response：

Use mousemove event listener instead of change.

$('#timerange').on('mousemove' ,function(){
   $('#timetext').text($('#timerange').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range"  min="0" max="9" value="0" id="timerange">
<label >Time: <span id="timetext">0</span></label>