From 6318115380c7a7d562f8745c443bc9868438281f Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Tue, 11 Aug 2026 22:43:22 -0400
Subject: [PATCH] fix: make the vendored slider track visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../src/lib/components/ui/slider/index.ts     |  4 +--
 .../lib/components/ui/slider/slider.svelte    | 25 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/ui/slider/index.ts b/frontend/src/lib/components/ui/slider/index.ts
index 820f209..f1524fc 100644
--- a/frontend/src/lib/components/ui/slider/index.ts
+++ b/frontend/src/lib/components/ui/slider/index.ts
@@ -1,7 +1,7 @@
-import Root from "./slider.svelte";
+import Root from './slider.svelte';
 
 export {
 	Root,
 	//
-	Root as Slider,
+	Root as Slider
 };
diff --git a/frontend/src/lib/components/ui/slider/slider.svelte b/frontend/src/lib/components/ui/slider/slider.svelte
index ebfa45f..a8cc22c 100644
--- a/frontend/src/lib/components/ui/slider/slider.svelte
+++ b/frontend/src/lib/components/ui/slider/slider.svelte
@@ -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}