vertical styles + parity

huntabyte · Feb 19, 2025 · f3ab021 · f3ab021
1 parent fac8178
commit f3ab021
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 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
@@ -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
@@ -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