HTML 范围有时会卡住

Question

当我滑动 HTML 范围输入时，我的鼠标变成“不允许”光标，并且滑动停止。

.main__slider__input {
  width: 100%;
}

<div class="main__slider">
  <!-- <label for="slider-height">Height</label> -->
  <input id="slider-height" type="range" class="main__slider__input" />
  <!-- <label for="slider-width">Width</label> -->
  <input id="slider-width" type="range" class="main__slider__input" />
  <!-- <label for="slider-zoom">Zoom</label> -->
  <input id="slider-zoom" type="range" class="main__slider__input" />
</div>

起初，我以为鼠标在我添加到输入的 HTML 标签上拖动。然而，当我注释掉这些内容时，问题仍然存在。

这是演示该问题的视频。

我认为鼠标聚焦在输入周围的一些空白处，这导致它无法平滑滑动，我该如何纠正这个问题。

Answer 1

据 Grumpy 报道，这是由于意外选择滑块后面的元素造成的。 因此，可以通过禁用容器中的选择来解决此问题：

.container{
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
 user-select: none; /* Standard syntax */
}