Prevents dragging <input type="range"> slider with mouse when selected as text in Chrome

After a little tinkering I was able to stop this behavior by emtpying the user selection on mousedown. Emptying it on dragstart is too late, in that case the slider would work only from the second attempt onwards. mousedown is better.

document.querySelectorAll('input[type="range"]').forEach((input) => { 
  input.addEventListener('mousedown', () => window.getSelection().removeAllRanges());
});

Please select text from here
<input type="range">
until here and then use the slider.

Setting user-select: none; for the <input> doesn't help, but you can set that rule for its parent.

Wrap the <input> in a dedicated <span> if it doesn't yet have a parent that shouldn't be selectable.

This solution works only if there's selectable text before or after the <input>, not on both sides.

:has(> input[type="range"]) {
  user-select: none;
}

<div>
  Triple click here, then drag (!) the slider
  <span>
    <input type="range">
  </span>
</div>

From @pmad's answer, it's not clear why e.stopImmediatePropagation() and resetting draggable are necessary. Simply calling e.preventDefault() as described in the question works, but it doesn't need to be applied to the entire drag event. You only need to ignore text selection once at the start of the drag, during the dragstart event:

document.querySelector('input[type="range"]').addEventListener('dragstart', (e) => {
  e.preventDefault();
});

<input type="range">

It seems that Chrome handles the <input> DOM element differently from other elements. Regardless of the type, the issue can be reproduced, but it's especially noticeable with range inputs, since a drag event there is expected to trigger an action.

p, input {
  display: block;
  margin-block: 1em;
  user-select: none;
}

<div>
  Click here, then press Ctrl+A
  <input type="text" value="test">
  <p>Hello World</p>
</div>

Chrome result after CTRLA	Firefox result after CTRLA

Chrome also highlights the contents of the <input>. In the case of a range this isn't visible, but it definitely happens in the background, which proves that the <input> element does not respect user-select: none; in any way. This is unexpected behavior - a bug.

Although the @root's solution is nice, as it wraps the input[type=range] element in a separate element and disables selection on it, it doesn't prevent direct text selection on <input> element. The approach is somewhat problematic because it would require wrapping every input[type=range] in a separate element, and it fails if this wrapping is omitted or not feasible.

Instead of wrapping in a separate parent span, you can simply apply user-select: none; directly to the input element and all its pseudo-elements, like this:

input[type="range"] {
  user-select: none;
}

<div>
  Triple click here, then drag (!) the slider
  <input type="range">
</div>

Note: This provides a solution for mouse selection, but not for the CTRLA combination. However, it doesn't require extra JS code or wrapping in an additional parent element.

Note: In my original example, I favored extending user-select: none; to pseudo-elements (-webkit-slider-thumb and -webkit-slider-runnable-track), but later I realized that this was merely a side effect of incorrect testing; in fact, when triple-clicking to select the sibling text, the <input> is already protected by the user-select: none; mentioned in the question.

Another interesting point is that although @root's solution of wrapping the <input> in an element solves the input[type=range] problem, for other inputs it remains obvious that the content of an <input> cannot be prevented from being selected using user-select: none;.

:has(> input[type="text"]) {
  user-select: none;
}

<div>
  Click here, then press Ctrl+A
  <span>
    <input type="text" value="test">
  </span>
</div>

I think if the content selection issue could be resolved, it would also fix the inconsistent behavior of range inputs. I believe this is something that should rather be reported as a bug in Chromium.