From d07ccf6f63572636a7cf423f1afa7f167e7d81bc Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 8 Mar 2026 00:46:41 +0800
Subject: [PATCH] fix realtime slider thumb styling

---
 components/canvas/RealtimeCanvasDialog.tsx | 10 ++++++++--
 components/ui/slider.tsx                   | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 19bc01314..5bb258db1 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -2426,7 +2426,10 @@ export function RealtimeCanvasDialog({
                     max={50}
                     step={1}
                     onValueChange={([val]) => setBrushSize(val)}
-                    className="min-w-[140px] flex-1 [&>span:first-child]:h-2.5 [&>span:first-child]:bg-zinc-200 [&>span:first-child]:shadow-inner [&>span:first-child>span]:bg-sky-500 [&>span:last-child]:h-5 [&>span:last-child]:w-5 [&>span:last-child]:border-2 [&>span:last-child]:border-sky-500 [&>span:last-child]:bg-white"
+                    className="min-w-[140px] flex-1"
+                    trackClassName="h-2.5 bg-zinc-200 shadow-inner"
+                    rangeClassName="bg-sky-500"
+                    thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
                   />
                 </div>
                 <div className="flex h-8 items-center gap-1 rounded-full border border-black/10 bg-white px-2">
@@ -2795,7 +2798,10 @@ export function RealtimeCanvasDialog({
                             scheduleFlush(true);
                           }
                         }}
-                        className="flex-1 [&>span:first-child]:h-2.5 [&>span:first-child]:bg-zinc-200 [&>span:first-child]:shadow-inner [&>span:first-child>span]:bg-sky-500 [&>span:last-child]:h-5 [&>span:last-child]:w-5 [&>span:last-child]:border-2 [&>span:last-child]:border-sky-500 [&>span:last-child]:bg-white"
+                        className="flex-1"
+                        trackClassName="h-2.5 bg-zinc-200 shadow-inner"
+                        rangeClassName="bg-sky-500"
+                        thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
                       />
                       <Button
                         type="button"
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index 38249d1b5..4a8960faa 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -7,8 +7,12 @@ import { cn } from "@/lib/utils"
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, orientation = "horizontal", ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    trackClassName?: string
+    rangeClassName?: string
+    thumbClassName?: string
+  }
+>(({ className, orientation = "horizontal", trackClassName, rangeClassName, thumbClassName, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     orientation={orientation}
@@ -22,17 +26,22 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track 
       className={cn(
         "relative grow overflow-hidden rounded-full bg-secondary",
-        orientation === "horizontal" ? "h-2 w-full" : "h-full w-2"
+        orientation === "horizontal" ? "h-2 w-full" : "h-full w-2",
+        trackClassName
       )}
     >
       <SliderPrimitive.Range 
         className={cn(
           "absolute bg-primary",
-          orientation === "horizontal" ? "h-full" : "w-full"
+          orientation === "horizontal" ? "h-full" : "w-full",
+          rangeClassName
         )}
       />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background shadow-sm outline-none transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className={cn(
+      "block h-5 w-5 rounded-full border-2 border-primary bg-background shadow-sm outline-none transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50",
+      thumbClassName
+    )} />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName