diff --git a/web/app/components/base/slider/index.tsx b/web/app/components/base/slider/index.tsx
index a994b629ed..18ef3a7a29 100644
--- a/web/app/components/base/slider/index.tsx
+++ b/web/app/components/base/slider/index.tsx
@@ -31,9 +31,9 @@ const Slider: React.FC<ISliderProps> = ({
     min={min || 0}
     max={max || 100}
     step={step || 1}
-    className={cn('slider', className)}
-    thumbClassName={cn('slider-thumb', thumbClassName)}
-    trackClassName={cn('slider-track', trackClassName)}
+    className={cn('relative slider', className)}
+    thumbClassName={cn('absolute top-[-9px] w-2 h-5 border-[0.5px] border-components-silder-knob-border rounded-[3px] bg-components-silder-knob shadow-sm  focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
+    trackClassName={cn('h-0.5 rounded-full slider-track', trackClassName)}
     onChange={onChange}
   />
 }
diff --git a/web/app/components/base/slider/style.css b/web/app/components/base/slider/style.css
index 212d4d1dcc..6b4394ed93 100644
--- a/web/app/components/base/slider/style.css
+++ b/web/app/components/base/slider/style.css
@@ -1,32 +1,11 @@
-.slider {
-    position: relative;
-}
 .slider.disabled {
     opacity: 0.6;
 }
 
-.slider-thumb {
-    width: 16px;
-    height: 16px;
-    background-color: white;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    position: absolute;
-    top: -8px;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
-    cursor: pointer;
-
-}
-
-.slider-thumb:focus {
-    outline: none;
-}
-
 .slider-track {
-    background-color: #528BFF;
-    height: 2px;
+    background-color: var(--color-components-silder-range);
 }
 
 .slider-track-1 {
-    background-color: #E5E7EB;
-}
+    background-color: var(--color-components-silder-track);
+}
\ No newline at end of file