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

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" class="form-range" min="0" max="9" value="0" id="timerange">
<label class="form-label">Time: <span id="timetext">0</span></label>

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

Use mousemove event listener instead of change.

EDIT: If you want touch screen device event listener then add an event for touchmove. In my example I have added an array of events to listen for and have added them to a JQuery $each method. So your slider will fire for both mousemove and touchmove.

const events = ['mousemove', 'touchmove']

$.each(events, function(k,v) {
  $('#timerange').on(v, function() {
    $('#timetext').text($('#timerange').val());
  });
})

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