Skip to content

Commit 38d21cb

Browse files
akarabachakarabach
committed
refactor(web): use canonical shadcn slider (base-mira style)
Replace our hand-rolled slider.tsx with the exact upstream `@shadcn` `base-mira` component via: bunx --bun shadcn@latest add slider --overwrite Differences vs the previous local copy are purely cosmetic and match the current shadcn default: - Track: `rounded-md bg-muted` with `h-1` (was `rounded-full bg-muted-foreground/30 h-1.5`) - Thumb: `size-3 rounded-md` (was `size-4 rounded-full`) - Data-attr variants: `data-horizontal:` / `data-vertical:` short form (was `data-[orientation=horizontal]:` / `-vertical:`) Keeps us aligned with upstream so future `shadcn@latest add slider` diffs stay empty. The `_values` fallback for the edge case of a scalar-number `value` / `defaultValue` is preserved verbatim from upstream — we do not locally patch shadcn components.
1 parent 61dd7a1 commit 38d21cb

1 file changed

Lines changed: 5 additions & 8 deletions

File tree

‎apps/web/src/components/ui/slider.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,7 @@ function Slider({
1818

1919
return (
2020
<SliderPrimitive.Root
21-
className={cn(
22-
"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
23-
className,
24-
)}
21+
className={cn("data-horizontal:w-full data-vertical:h-full", className)}
2522
data-slot="slider"
2623
defaultValue={defaultValue}
2724
value={value}
@@ -30,21 +27,21 @@ function Slider({
3027
thumbAlignment="edge"
3128
{...props}
3229
>
33-
<SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col">
30+
<SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
3431
<SliderPrimitive.Track
3532
data-slot="slider-track"
36-
className="relative grow overflow-hidden rounded-full bg-muted-foreground/30 select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
33+
className="relative grow overflow-hidden rounded-md bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
3734
>
3835
<SliderPrimitive.Indicator
3936
data-slot="slider-range"
40-
className="bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
37+
className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
4138
/>
4239
</SliderPrimitive.Track>
4340
{Array.from({ length: _values.length }, (_, index) => (
4441
<SliderPrimitive.Thumb
4542
data-slot="slider-thumb"
4643
key={index}
47-
className="relative block size-4 shrink-0 rounded-full border border-ring bg-white ring-ring/30 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden active:ring-2 disabled:pointer-events-none disabled:opacity-50"
44+
className="relative block size-3 shrink-0 rounded-md border border-ring bg-white ring-ring/30 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden active:ring-2 disabled:pointer-events-none disabled:opacity-50"
4845
/>
4946
))}
5047
</SliderPrimitive.Control>

0 commit comments

Comments
 (0)