Fixed glitchy volume slider

src/components/audio/Player.vue

@@ -44,7 +44,7 @@
 
     <div class="controls ui grid">
       <div class="volume-control four wide center aligned column">
-        <input type="range" step="0.05" min="0" max="1" @change="queue.setVolume(parseFloat($event.target.value))" :value="currentVolume"/>
+        <input ref="volume" type="range" step="0.05" min="0" max="1" @change="queue.setVolume(parseFloat($event.target.value))" />
         <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>
@@ -80,7 +80,9 @@ export default {
       radios
     }
   },
-
+  mounted () {
+    this.$refs.volume.value = this.currentVolume
+  },
   methods: {
     pauseOrPlay () {
       if (this.queue.audio.state.playing) {
@@ -106,7 +108,11 @@ export default {
     currentVolume () {
       return this.queue.audio.state.volume
     }
-
+  },
+  watch: {
+    currentVolume (newValue) {
+      this.$refs.volume.value = this.currentVolume
+    }
   }
 }
 </script>