diff --git a/front/src/components/ui/Slider.vue b/front/src/components/ui/Slider.vue
index 8a3b882d5..f74ae9a2f 100644
--- a/front/src/components/ui/Slider.vue
+++ b/front/src/components/ui/Slider.vue
@@ -83,7 +83,7 @@ onMounted(() => {
         ref="input"
         v-model="index"
         type="range"
-        style="width: var(--slider-width); opacity: .001;"
+        style="width: var(--slider-width);"
         :max="keys.length - 1"
         :autofocus="autofocus || undefined"
       >
@@ -142,11 +142,11 @@ onMounted(() => {
   // Fake slider
   .range {
     width: calc(var(--step-size) * var(--current-step));
-    border-bottom: 2px solid currentcolor;
     position: absolute;
     top: 11px;
     transition: all .1s;
     pointer-events: none;
+    background-color: var(--fw-primary);
   }
   input:focus~.range {
     // focused style
@@ -155,10 +155,11 @@ onMounted(() => {
     border-radius: 8px;
     width: 16px;
     height: 16px;
-    left: calc(var(--step-size) * var(--current-step));
-    background: currentcolor;
+    left: calc(var(--step-size) * var(--current-step) + 2px);
+    border: 2px solid var(--fw-primary);
+    background-color: var(--fw-primary);
     position: absolute;
-    top: 4px;
+    top: 2px;
     transition: all .1s;
     pointer-events: none;
   }