如何在滑动时获取Bootstrap 5范围滑块的值

你只需要把监听的事件从change换成input，或者同时监听两个事件，就能在拖动滑块的过程中实时获取并更新数值了。

change事件仅在用户松开鼠标、结束交互时触发，而input事件会在滑块值发生变化的整个过程中持续触发，刚好满足你实时更新的需求。

修改后的jQuery代码如下：

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

如果需要兼顾结束拖动时的额外逻辑（比如验证、提交），可以同时监听input和change事件：

$('#timerange').on('input change', function(){
   $('#timetext').text($(this).val());
   // 这里可以添加change事件专属的逻辑
});

你的HTML部分无需修改：

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

调整后，拖动滑块手柄时，#timetext内的数值会实时同步变化。

内容的提问来源于stack exchange，提问作者Newbie coder