repod/src/components/Player/Volume.vue

<template>
	<div>
		<VolumeHigh v-if="player.volume > 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeLow v-if="player.volume > 0 && player.volume <= 0.3"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMedium v-if="player.volume > 0.3 && player.volume <= 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMute v-if="player.volume === 0"
			class="pointer"
			:size="30"
			@click="$store.dispatch('player/volume', volumeMuted)" />
		<input max="1"
			min="0"
			step="0.1"
			type="range"
			:value="player.volume"
			@change="(event) => $store.dispatch('player/volume', event.target.value)">
	</div>
</template>

<script>
import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'

export default {
	name: 'Volume',
	components: {
		VolumeHigh,
		VolumeLow,
		VolumeMedium,
		VolumeMute,
	},
	data() {
		return {
			volumeMuted: 0,
		}
	},
	computed: {
		player() {
			return this.$store.state.player
		},
	},
	methods: {
		mute() {
			this.volumeMuted = this.player.volume
			this.$store.dispatch('player/volume', 0)
		},
	},
}
</script>

<style scoped>
    div {
        align-items: center;
		display: flex;
		gap: 5px;
		justify-content: flex-end;
    }

	input {
		transform: rotate(270deg);
		width: 4rem;
	}

	.pointer {
		cursor: pointer;
	}
</style>