lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix realtime slider thumb styling
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-08 00:46:41 +08:00
parent 8f3b694cb8
commit d07ccf6f63
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/canvas/RealtimeCanvasDialog.tsx
View File

@ -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"

19
components/ui/slider.tsx
View File

@ -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