Is there any way to prevent the default drag feature of input range, with out impacting the click functionality? The user needs to change the values using clicking but not using drag.
<input
type="range"
min="0"
max="100"
step="1"
class="custom-audio-slider"
/>
demo : https://www.w3schools.com/code/tryit.asp?filename=GVF5ZH6S3HSF
Try like following snippet:
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>