---

app.vue

@@ -80,9 +80,9 @@
       :direction="'horizontal'"
       :pt="{
         root: { class: '' },
-        slider: { class: 'bg-black text-white' },
+        slider: { class: 'text-white' },
-        counter: { class: 'max-w-[1200px] mx-auto px-6 container' },
+        counter: { class: 'max-w-[1200px] mx-auto px-6 container text-black' },
-        progress: { class: 'bg-dark mt-4 h-1 transition-all duration-500' },
+        progress: { class: 'bg-black mt-4 h-1 transition-all duration-500' },
       }"
       class="my-[50px] relative z-30"
     >

src/components/Ml/Slider/MlSlider.vue

@@ -29,9 +29,7 @@
     </swiper>
     <div>
       <div :class="counterClasses">
-        <div :class="progressClass"
+        <div :class="progressClass" :style="`width: ${progerssBar}%`"></div>
-          :style="`width: ${progerssBar}%`"
-        ></div>
         <div class="flex justify-between my-4">
           <button
             :disabled="isPrevDisabled"
@@ -65,7 +63,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import type { Swiper as swiper } from "swiper/types";
 import "swiper/css";
 import { twMerge } from "tailwind-merge";
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/vue/24/solid";
+import { ArrowLeftIcon, ArrowRightIcon } from "#imports";
 import type { PTAttribs, SliderProps } from "./types";
 
 const showSwiper = ref(false);

src/components/Ml/Slider/types.ts

@@ -18,7 +18,7 @@ export type PTAttribs = {
     direction: string;
   };
   progress?: {
-    direction: string;
+    class: string;
   };
 };