From f3ab0212998a76353ca08edaf83f938f9dfdded5 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Wed, 19 Feb 2025 06:10:36 -0600
Subject: [PATCH] vertical styles + parity

---
 .../registry/default/ui/slider/slider.svelte  | 18 +++++++++++++----
 .../registry/new-york/ui/slider/slider.svelte | 20 +++++++++++++------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/sites/docs/src/lib/registry/default/ui/slider/slider.svelte b/sites/docs/src/lib/registry/default/ui/slider/slider.svelte
index 2f8b6e1e3..ac0c36cdb 100644
--- a/sites/docs/src/lib/registry/default/ui/slider/slider.svelte
+++ b/sites/docs/src/lib/registry/default/ui/slider/slider.svelte
@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
+		orientation = "horizontal",
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
@@ -15,14 +16,23 @@ Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
 <SliderPrimitive.Root
-	bind:value={value as never}
 	bind:ref
-	class={cn("relative flex w-full touch-none select-none items-center", className)}
+	bind:value={value as never}
+	{orientation}
+	class={cn(
+		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		className
+	)}
 	{...restProps}
 >
 	{#snippet children({ thumbs })}
-		<span class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
-			<SliderPrimitive.Range class="bg-primary absolute h-full" />
+		<span
+			data-orientation={orientation}
+			class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+		>
+			<SliderPrimitive.Range
+				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+			/>
 		</span>
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb
diff --git a/sites/docs/src/lib/registry/new-york/ui/slider/slider.svelte b/sites/docs/src/lib/registry/new-york/ui/slider/slider.svelte
index a2497b077..336a97dce 100644
--- a/sites/docs/src/lib/registry/new-york/ui/slider/slider.svelte
+++ b/sites/docs/src/lib/registry/new-york/ui/slider/slider.svelte
@@ -4,12 +4,11 @@
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		value = $bindable(),
+		orientation = "horizontal",
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
-
-	export { className as class };
 </script>
 
 <!--
@@ -19,12 +18,21 @@ get along, so we shut typescript up by casting `value` to `never`.
 <SliderPrimitive.Root
 	bind:ref
 	bind:value={value as never}
-	class={cn("relative flex w-full touch-none select-none items-center", className)}
+	{orientation}
+	class={cn(
+		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		className
+	)}
 	{...restProps}
 >
 	{#snippet children({ thumbs })}
-		<span class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
-			<SliderPrimitive.Range class="bg-primary absolute h-full" />
+		<span
+			data-orientation={orientation}
+			class="bg-primary/20 relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-1.5 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-1.5"
+		>
+			<SliderPrimitive.Range
+				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+			/>
 		</span>
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb