From 6634f6df1e5823959b980592943cf2114f1e68af Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 00:45:45 +0300
Subject: [PATCH] feature(SliderLine): complete rework of the slider line, now
 it look like a magnifying glass

---
 .../components/SliderLine.svelte              | 66 +++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index d4262a3..fbb2e52 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -17,40 +17,54 @@ interface Props {
 }
 let { sliderPos, isDragging }: Props = $props();
 </script>
-
 <div
-    class="absolute inset-y-0 pointer-events-none -translate-x-1/2 z-30"
+    class="absolute inset-y-4 pointer-events-none -translate-x-1/2 z-50 transition-all duration-300 ease-out flex flex-col justify-center items-center"
     style:left="{sliderPos}%"
 >
-    <!-- Subtle wave glow zone -->
+    <!-- We use part of lucide cursor svg icon as a handle -->
+    <svg
+        class={cn(
+            'transition-all relative duration-300 text-black/80 drop-shadow-sm',
+            isDragging ? 'w-12 h-12' : 'w-8 h-8',
+        )}
+        viewBox="0 0 24 12"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path d="M17 10h-1a4 4 0 0 1-4-4V0" />
+        <path d="M7 10h1a4 4 0 0 0 4-4V0" />
+    </svg>
+
     <div
         class={cn(
-            'absolute inset-y-0 w-24 -left-12 bg-linear-to-r from-transparent via-indigo-500/8 to-transparent transition-all duration-300',
-            isDragging ? 'via-indigo-500/12' : '',
+            'relative h-full rounded-sm transition-all duration-500',
+            'bg-white/[0.03] backdrop-blur-md',
+            // These are the visible "edges" of the glass
+            'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
+            'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',
+            'rounded-full',
+            isDragging ? 'w-32' : 'w-16',
         )}
     >
     </div>
 
-    <!-- Vertical divider line -->
-    <div
-        class="absolute inset-y-0 w-0.5 bg-linear-to-b from-indigo-400/30 via-indigo-500 to-indigo-400/30 shadow-[0_0_12px_rgba(99,102,241,0.5)] transition-shadow duration-200"
-        class:shadow-[0_0_20px_rgba(99,102,241,0.7)]={isDragging}
+    <!-- We use part of lucide cursor svg icon as a handle -->
+    <svg
+        class={cn(
+            'transition-all relative duration-500 text-black/80 drop-shadow-sm',
+            isDragging ? 'w-12 h-12' : 'w-8 h-8',
+        )}
+        viewBox="0 0 24 12"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
     >
-    </div>
-
-    <!-- Top knob -->
-    <div
-        class="absolute top-6 left-0 -translate-x-1/2 transition-transform duration-200"
-        class:scale-125={isDragging}
-    >
-        <div class="w-3 h-3 bg-indigo-500 rounded-full shadow-lg ring-2 ring-white"></div>
-    </div>
-
-    <!-- Bottom knob -->
-    <div
-        class="absolute bottom-6 left-0 -translate-x-1/2 transition-transform duration-200"
-        class:scale-125={isDragging}
-    >
-        <div class="w-3 h-3 bg-indigo-500 rounded-full shadow-lg ring-2 ring-white"></div>
-    </div>
+        <path d="M17 2h-1a4 4 0 0 0-4 4v6" />
+        <path d="M7 2h1a4 4 0 0 1 4 4v6" />
+    </svg>
 </div>