0
80
VistasHTML 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
- Mouse down slightly below the range slider
- With mouse button still pressed move mouse across the range slider to top of it
- 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:
1 Respuestas
Responde la pregunta0
After a little tinkering I was able to stop this behavior with the following JS:
document.querySelectorAll('input[type="range"]').forEach((input) => {
input.addEventListener('mousedown', () => window.getSelection().removeAllRanges());
});