Commit 41d2e6e8 authored by Agate's avatar Agate 💬

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

parent 6d1596b5
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="controls ui grid"> <div class="controls ui grid">
<div class="volume-control four wide center aligned column"> <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="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-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> <i title="Mute" @click="queue.setVolume(0)" v-else class="volume up secondary icon"></i>
...@@ -75,13 +75,15 @@ export default { ...@@ -75,13 +75,15 @@ export default {
}, },
data () { data () {
return { return {
sliderVolume: this.currentVolume,
queue: queue, queue: queue,
Track: Track, Track: Track,
radios radios
} }
}, },
mounted () { mounted () {
this.$refs.volume.value = this.currentVolume // we trigger the watcher explicitely it does not work otherwise
this.sliderVolume = this.currentVolume
}, },
methods: { methods: {
pauseOrPlay () { pauseOrPlay () {
...@@ -111,7 +113,10 @@ export default { ...@@ -111,7 +113,10 @@ export default {
}, },
watch: { watch: {
currentVolume (newValue) { currentVolume (newValue) {
this.$refs.volume.value = this.currentVolume this.sliderVolume = newValue
},
sliderVolume (newValue) {
this.queue.setVolume(parseFloat(newValue))
} }
} }
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment