feat(next): Vertical sliders (#1706)

huntabyte · Feb 19, 2025 · 99dd57d · 99dd57d
1 parent e498dc1
commit 99dd57d
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 11 deletions.
diff --git a/sites/docs/src/content/components/slider.md b/sites/docs/src/content/components/slider.md
@@ -66,3 +66,9 @@ Install `bits-ui`:
 <div></div>
 
 </ComponentPreview>
+
+<ComponentPreview name="slider-vertical">
+
+<div></div>
+
+</ComponentPreview>
diff --git a/sites/docs/src/lib/registry/default/example/index.ts b/sites/docs/src/lib/registry/default/example/index.ts
@@ -47,7 +47,8 @@ export { default as SheetDemo } from "./sheet-demo.svelte";
 export { default as SheetSide } from "./sheet-side.svelte";
 export { default as SkeletonDemo } from "./skeleton-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
-export { default as SLiderMultiple } from "./slider-multiple.svelte";
+export { default as SliderMultiple } from "./slider-multiple.svelte";
+export { default as SliderVertical } from "./slider-vertical.svelte";
 export { default as SwitchDemo } from "./switch-demo.svelte";
 export { default as TableDemo } from "./table-demo.svelte";
 export { default as TabsDemo } from "./tabs-demo.svelte";

diff --git a/sites/docs/src/lib/registry/default/example/slider-vertical.svelte b/sites/docs/src/lib/registry/default/example/slider-vertical.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Slider } from "$lib/registry/default/ui/slider/index.js";
+
+	let value = $state(50);
+</script>
+
+<Slider type="single" orientation="vertical" bind:value max={100} step={1} />
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/example/index.ts b/sites/docs/src/lib/registry/new-york/example/index.ts
@@ -48,6 +48,7 @@ export { default as SheetSide } from "./sheet-side.svelte";
 export { default as SkeletonDemo } from "./skeleton-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
 export { default as SliderMultiple } from "./slider-multiple.svelte";
+export { default as SliderVertical } from "./slider-vertical.svelte";
 export { default as SwitchDemo } from "./switch-demo.svelte";
 export { default as TableDemo } from "./table-demo.svelte";
 export { default as TabsDemo } from "./tabs-demo.svelte";

diff --git a/sites/docs/src/lib/registry/new-york/example/slider-vertical.svelte b/sites/docs/src/lib/registry/new-york/example/slider-vertical.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
+
+	let value = $state(50);
+</script>
+
+<Slider type="single" orientation="vertical" bind:value max={100} step={1} />
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