如何在“幻灯片上”获取 Bootstrap 5 范围滑块值答案

【问题标题】：How to get Bootstrap 5 range slider value "on slide"如何在“幻灯片上”获取 Bootstrap 5 范围滑块值
【发布时间】：2022-11-03 07:27:16
【问题描述】：

我想知道是否可以在滑动时从引导程序 5 滑块获取值，即，如果我按下鼠标并滑动“手柄”，我会连续获取值，而不仅仅是在释放“手柄”时？

现在我正在使用 Bootstrap5 范围滑块和 jQuery 来检测滑块中的“更改”并使用新值更新文本跨度。并且只有当我在新值上释放鼠标按钮时才会发生这种变化，当按下鼠标按钮时“手柄”在它们上方滑动时不会显示可能的值。关于如何解决这个问题的任何建议？

我的代码如下所示：

<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());
});

【问题讨论】：

是的，MDN docs for the change event 中描述了您观察到的行为。您可以阅读它以获取更多信息。我发现 MDN 是一个非常有用的资源。我建议使用它来了解各种标准的 Web 编程内容。

标签： javascript jquery slider bootstrap-5

【解决方案1】：

利用鼠标移动事件监听器而不是改变.

编辑：如果您想要触摸屏设备事件侦听器，请为touchmove 添加一个事件。在我的示例中，我添加了要侦听的事件数组，并将它们添加到 JQuery $each 方法中。因此，您的滑块将为mousemove 和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>

【讨论】：