Slider range is no fully reactive (volume increases / decreases even when mouse is not released)

src/components/audio/Player.vue

@@ -44,7 +44,7 @@
 
     <div class="controls ui grid">
       <div class="volume-control four wide center aligned column">
-        <input ref="volume" type="range" step="0.05" min="0" max="1" @change="queue.setVolume(parseFloat($event.target.value))" />
+        <input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" />
         <i title="Unmute" @click="queue.setVolume(1)" v-if="currentVolume === 0" class="volume off secondary icon"></i>
         <i title="Mute" @click="queue.setVolume(0)" v-else-if="currentVolume < 0.5" class="volume down secondary icon"></i>
         <i title="Mute" @click="queue.setVolume(0)" v-else class="volume up secondary icon"></i>
@@ -75,13 +75,15 @@ export default {
   },
   data () {
     return {
+      sliderVolume: this.currentVolume,
       queue: queue,
       Track: Track,
       radios
     }
   },
   mounted () {
-    this.$refs.volume.value = this.currentVolume
+    // we trigger the watcher explicitely it does not work otherwise
+    this.sliderVolume = this.currentVolume
   },
   methods: {
     pauseOrPlay () {
@@ -111,7 +113,10 @@ export default {
   },
   watch: {
     currentVolume (newValue) {
-      this.$refs.volume.value = this.currentVolume
+      this.sliderVolume = newValue
+    },
+    sliderVolume (newValue) {
+      this.queue.setVolume(parseFloat(newValue))
     }
   }
 }