¿Hay alguna forma de evitar la función de arrastre predeterminada del rango de entrada, sin afectar la funcionalidad de clic? El usuario necesita cambiar los valores haciendo clic pero no arrastrando.
<input type="range" min="0" max="100" step="1" class="custom-audio-slider" />demostración: https://www.w3schools.com/code/tryit.asp?filename=GVF5ZH6S3HSF
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { value: 7, drag: false, move: false } }, methods: { dragging() { this.drag = true }, stopDragging() { this.drag = false this.move = false }, moving() { if(this.drag) { this.move = true } }, } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <span id="valBox"></span> <div @mouseover="stopDragging"> <input type="range" min="0" max="100" step="1" v-model="value" :disabled ="move" @mousemove="moving" @mousedown="dragging" @mouseup="stopDragging"> <p>{{ value }}</p> </div> </div>