<template>
	<input class="progress"
		:max="player.duration"
		min="0"
		type="range"
		:value="player.currentTime"
		@change="(event) => $store.dispatch('player/seek', event.target.value)">
</template>

<script>
export default {
	name: 'ProgressBar',
	computed: {
		player() {
			return this.$store.state.player
		},
	},
}
</script>

<style scoped>
	.progress {
		height: 4px;
		min-height: 4px;
		position: absolute;
		top: -2px;
		width: 99%;
	}
</style>
