From b90186aefdb0268307d384b50c9b8572d19b55e7 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 2 Apr 2025 06:21:46 +0200
Subject: [PATCH] fix(style): slider

---
 front/src/components/ui/Slider.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/front/src/components/ui/Slider.vue b/front/src/components/ui/Slider.vue
index a652579a3..a82032c58 100644
--- a/front/src/components/ui/Slider.vue
+++ b/front/src/components/ui/Slider.vue
@@ -88,7 +88,7 @@ onMounted(() => {
         ref="input"
         v-model="index"
         type="range"
-        style="width: var(--slider-width); opacity: .001; cursor: pointer;"
+        style="width: var(--slider-width); cursor: pointer;"
         :max="keys.length - 1"
         :autofocus="autofocus || undefined"
       >
@@ -152,10 +152,13 @@ onMounted(() => {
   }
   // Fake slider
   .range {
-    width: calc(var(--step-size) * var(--current-step));
-    border-bottom: 2px solid currentcolor;
+    width: calc(var(--step-size) * var(--current-step) + 2px);
     position: absolute;
-    top: 11px;
+    top: 6px;
+    left: 2.5px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: var(--fw-primary);
     transition: all .1s;
     pointer-events: none;
     opacity: var(--slider-opacity);
@@ -168,15 +171,16 @@ onMounted(() => {
     width: 16px;
     height: 16px;
     left: calc(var(--step-size) * var(--current-step));
-    background: currentcolor;
+    background: var(--fw-primary);
     position: absolute;
-    top: 4px;
+    top: 2px;
+    margin-left: 2px;
     transition: all .1s;
     pointer-events: none;
   }
-  input:focus~.pin {
-    background-color: var(--focus-ring-color);
-    outline: 2px solid currentcolor;
+  input:focus~.pin,
+  input:hover~.pin {
+    outline: 1px solid currentColor;
   }
   &[disabled] .pin {
     display: none;