HTML Range Getting Stuck Sometimes

Question

As I slide the HTML range input, my mouse turns into the "not-allowed" cursor, and the sliding stops.

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

At first, I thought the mouse was dragging on the HTML labels I had added to the inputs. However, when I commented those out, the problem persisted.

Here is a video demonstrating the problem.

Range Problem

I think the mouse is focusing on some whitespace around the input, and that is preventing it from sliding smoothly, how do I go about rectifying this problem.

Answer 1

As reported by Grumpy, this is caused by accidentally selecting element behind the slider. So this can be fixed by disabling selection in the container with:

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