patrick/chitai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make the vendored slider track visible

Browse Source 
shadcn-svelte generates the track with `data-horizontal:` / `data-vertical:`
variants, which Tailwind compiles to `[data-horizontal]` — an attribute
nothing sets, since the orientation is carried as data-orientation. The track
got no height, leaving only the thumb on screen. Use the `data-[orientation=…]`
form the rest of ui/ already uses.
This commit is contained in:
patrick
2026-08-11 22:43:22 -04:00
parent fe12f4be76
commit 6318115380
2 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ui/slider/index.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import Root from "./slider.svelte";
import Root from './slider.svelte';
export {
Root,
//
Root as Slider,
Root as Slider
};
frontend/src/lib/components/ui/slider/slider.svelte
+18 -7
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { Slider as SliderPrimitive } from "bits-ui";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import { Slider as SliderPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
let {
ref = $bindable(null),
value = $bindable(),
orientation = "horizontal",
orientation = 'horizontal',
class: className,
...restProps
}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
@@ -14,6 +14,13 @@
<!--
Discriminated Unions + Destructing (required for bindable) do not
get along, so we shut typescript up by casting `value` to `never`.
The generated component styled the track with `data-horizontal:` /
`data-vertical:` variants, which Tailwind compiles to `[data-horizontal]` —
an attribute nothing sets, since the orientation is carried as
`data-orientation="horizontal"`. The track therefore had no height and only
the thumb was visible. These use the same `data-[orientation=…]` form as
separator.svelte, which is the convention everywhere else in ui/.
-->
<SliderPrimitive.Root
bind:ref
@@ -21,7 +28,7 @@ get along, so we shut typescript up by casting `value` to `never`.
data-slot="slider"
{orientation}
class={cn(
"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
'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',
className
)}
{...restProps}
@@ -31,13 +38,17 @@ get along, so we shut typescript up by casting `value` to `never`.
data-slot="slider-track"
data-orientation={orientation}
class={cn(
"rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden bg-muted data-horizontal:w-full data-vertical:h-full"
'relative grow overflow-hidden rounded-full bg-muted',
'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',
'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
)}
>
<SliderPrimitive.Range
data-slot="slider-range"
data-orientation={orientation}
class={cn(
"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
'absolute bg-primary select-none',
'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
)}
/>
</span>
@@ -45,7 +56,7 @@ get along, so we shut typescript up by casting `value` to `never`.
<SliderPrimitive.Thumb
data-slot="slider-thumb"
index={thumb.index}
class="relative size-3 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
class="relative block size-4 shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
/>
{/each}
{/snippet}