Vue 3 input type "range" mouse drag freezes shows "not-allowed" cursor

Question

I am experiencing a bug in Vue 3 with an html <input type="range"> element when v-model is used to bind a piece of state.

It doesn't happen all of the time, but after clicking and dragging the slider input eventually there will come a time when the dragging the handle of the range slider stops working and the mouse cursor becomes a "banned" icon similar to the cursor: not-allowed circle with a line through it. Using Chrome on Windows 10.

I have been able to reproduce it in two different Vue apps. One that uses the options API and another that uses the composition API.

Example code:

//app.js
<template>
  <div id="app">
    <input type="range" v-model="range" />

    {{ range }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      range: "5",
    };
  },
};
</script>

Any work arounds? Solutions to this?

Edit:

Evidently it does not have to be in Vue to get this behavior. In the snippet below one can observe it if you click and drag the mouse in the area around the range slider a couple times - as if to highlight it, as one would highlight a line of text for example. After it becomes "highlighted" (though there is no visual indication of this) it ceases to be useable and you get the error-icon cursor on attempting to set new value by drag.

<input type="range">

Answer 1

After further testing it turns out that this bug had nothing to do with vue and instead is present on all <input type="range"> html elements in Chrome.

I devised a work-around that avoids the bad behavior.

//app.js
<template>
  <div id="app">
    <input type="range" v-model="range" @mousedown="removeRanges" />

    {{ range }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      range: "5",
    };
  },
  methods: {
    removeRanges() {
      window.getSelection().removeAllRanges();
    },
  },
};
</script>