repod/src/components/Player/ProgressBar.vue

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

<script>
import { mapActions, mapState } from 'pinia'
import { usePlayer } from '../../store/player.js'

export default {
	name: 'ProgressBar',
	computed: {
		...mapState(usePlayer, ['duration', 'currentTime']),
	},
	methods: {
		...mapActions(usePlayer, ['seek']),
	},
}
</script>

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