Search code examples
javascripthtmlgoogle-chromehtml-input

HTML Input range type becomes un-usable by drag action if highlighted in chrome

Consider the following example as displayed on Windows in the Chrome browser.

<input type="range">

It produces a range slider. I have found that if I first use my mouse and

  1. Mouse down slightly below the range slider
  2. With mouse button still pressed move mouse across the range slider to top of it
  3. Release mouse

I can make the range slider stop functioning as expected. It displays a "circle with a line through it" cursor and refuses to allow me to slide the handle to the right or left.

My theory here is that the first actions I take "select" or "highlight" the range selector, as one would select a section of text in the browser, and then my subsequent attempts to operate the range slider are interpreted as me wanting to drag the selection.

Is there any work-around or way to avoid this bug?

So far attempts such as setting css user-select: none; on the input element do not work, neither does calling e.preventDefault() on the drag event.

See effect in GIF:

Recording of effect

Solution

  • The accepted solution doesn't work for me (chrome). This version does:

    const stop = function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
};

document.querySelectorAll('input[type="range"]').forEach((input) => { 
    input.draggable = true;
    input.addEventListener('dragstart', stop);
});