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 @@
<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))
}
}
}
......
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