remove: slider on Audio player

components/AudioDuration.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="h-2 w-full overflow-hidden rounded-full bg-white/20" />
+    <!-- Progress Bar Overlay -->
+    <div
+      class="pointer-events-none absolute left-0 top-0 h-2 rounded-full bg-white"
+      :style="{
+        width: `calc(${((props.currentTime - (min - 2)) / (max + 2 - min)) * 100}%)`,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  currentTime: { type: Number, default: 0 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+});
+</script>

components/AudioPlayer.vue

@@ -18,15 +18,11 @@
         >
       </button>
     </div>
-    <RangeSlider
+    <AudioDuration
       class="relative flex w-full flex-col items-center"
+      :currentTime="currentTime"
       :min="0"
       :max="duration"
-      :model-value="currentTime"
-      :step="1"
-      @mousedown="seekUp"
-      @mouseup="seekDown"
-      @mousemove="seekMove"
     />
     <!-- Time indicators -->
     <div class="mt-2 flex w-full justify-between text-sm text-white">
@@ -47,8 +43,8 @@ import ClockClockwise from "~/assets/img/clock-clockwise.svg?component";
 import ClockCounterClockwise from "~/assets/img/clock-counter-clockwise.svg?component";
 import Play from "~/assets/img/play.svg?component";
 import Pause from "~/assets/img/pause.svg?component";
-const config = useRuntimeConfig()
-const { baseURL } = config.app
+const config = useRuntimeConfig();
+const { baseURL } = config.app;
 
 const props = defineProps(["audioSrc", "subtitleSrc"]);
 const isPlaying = defineModel();