breaking: update bits slider for single and multiple types (#1588)

sites/docs/package.json

@@ -43,7 +43,7 @@
 		"acorn": "^8.13.0",
 		"acorn-typescript": "^1.4.13",
 		"autoprefixer": "^10.4.19",
-		"bits-ui": "1.0.0-next.71",
+		"bits-ui": "1.0.0-next.76",
 		"clsx": "^2.1.1",
 		"concurrently": "^9.0.1",
 		"d3-scale": "^4.0.2",

sites/docs/src/__registry__/index.js

@@ -755,6 +755,14 @@ export const Index = {
 			files: ["../lib/registry/default/example/slider-demo.svelte"],
 			raw: () => import("../lib/registry/default/example/slider-demo.svelte?raw").then((m) => m.default),
 		},
+		"slider-multiple": {
+			name: "slider-multiple",
+			type: "registry:example",
+			registryDependencies: ["slider"],
+			component: () => import("../lib/registry/default/example/slider-multiple.svelte").then((m) => m.default),
+			files: ["../lib/registry/default/example/slider-multiple.svelte"],
+			raw: () => import("../lib/registry/default/example/slider-multiple.svelte?raw").then((m) => m.default),
+		},
 		"sonner-demo": {
 			name: "sonner-demo",
 			type: "registry:example",
@@ -1820,6 +1828,14 @@ export const Index = {
 			files: ["../lib/registry/new-york/example/slider-demo.svelte"],
 			raw: () => import("../lib/registry/new-york/example/slider-demo.svelte?raw").then((m) => m.default),
 		},
+		"slider-multiple": {
+			name: "slider-multiple",
+			type: "registry:example",
+			registryDependencies: ["slider"],
+			component: () => import("../lib/registry/new-york/example/slider-multiple.svelte").then((m) => m.default),
+			files: ["../lib/registry/new-york/example/slider-multiple.svelte"],
+			raw: () => import("../lib/registry/new-york/example/slider-multiple.svelte?raw").then((m) => m.default),
+		},
 		"sonner-demo": {
 			name: "sonner-demo",
 			type: "registry:example",

sites/docs/src/content/components/slider.md

@@ -42,7 +42,27 @@ Install `bits-ui`:
 ```svelte
 <script lang="ts">
   import { Slider } from "$lib/components/ui/slider/index.js";
+  let value = $state(33);
 </script>
 
-<Slider value={[33]} max={100} step={1} />
+<Slider type="single" bind:value max={100} step={1} />
 ```
+
+## Examples
+
+### Multiple Thumbs
+
+```svelte
+<script lang="ts">
+  import { Slider } from "$lib/components/ui/slider/index.js";
+  let value = $state([25, 75]);
+</script>
+
+<Slider type="multiple" bind:value max={100} step={1} />
+```
+
+<ComponentPreview name="slider-multiple">
+
+<div></div>
+
+</ComponentPreview>

sites/docs/src/lib/registry/default/example/index.ts

@@ -47,6 +47,7 @@ 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 SwitchDemo } from "./switch-demo.svelte";
 export { default as TableDemo } from "./table-demo.svelte";
 export { default as TabsDemo } from "./tabs-demo.svelte";

sites/docs/src/lib/registry/default/example/slider-demo.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Slider } from "$lib/registry/default/ui/slider/index.js";
+
+	let value = $state(50);
 </script>
 
-<Slider value={[50]} max={100} step={1} class="max-w-[70%]" />
+<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />

sites/docs/src/lib/registry/default/example/slider-multiple.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Slider } from "$lib/registry/default/ui/slider/index.js";
+
+	let value = $state([25, 75]);
+</script>
+
+<Slider type="multiple" bind:value max={100} step={1} class="max-w-[70%]" />

sites/docs/src/lib/registry/default/ui/slider/slider.svelte

@@ -4,15 +4,19 @@
 
 	let {
 		ref = $bindable(null),
-		value = $bindable([0]),
+		value = $bindable(),
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 </script>
 
+<!--
+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
-	bind:value
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
 	{...restProps}
 >

sites/docs/src/lib/registry/new-york/example/index.ts

@@ -47,6 +47,7 @@ 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 SwitchDemo } from "./switch-demo.svelte";
 export { default as TableDemo } from "./table-demo.svelte";
 export { default as TabsDemo } from "./tabs-demo.svelte";

sites/docs/src/lib/registry/new-york/example/slider-demo.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
+
+	let value = $state(50);
 </script>
 
-<Slider value={[50]} max={100} step={1} class="max-w-[70%]" />
+<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />

sites/docs/src/lib/registry/new-york/example/slider-multiple.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
+
+	let value = $state([25, 75]);
+</script>
+
+<Slider type="multiple" bind:value max={100} step={1} class="max-w-[70%]" />

sites/docs/src/lib/registry/new-york/ui/slider/slider.svelte

@@ -5,16 +5,20 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable([0]),
+		value = $bindable(),
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 
 	export { className as class };
 </script>
 
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
 <SliderPrimitive.Root
 	bind:ref
-	bind:value
+	bind:value={value as never}
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
 	{...restProps}
 >

sites/docs/src/routes/(app)/examples/playground/(components)/max-length-selector.svelte

@@ -4,7 +4,7 @@
 	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
 	import { Label } from "$lib/registry/new-york/ui/label/index.js";
 
-	let { value = $bindable() }: SliderPrimitive.RootProps = $props();
+	let { value = $bindable(), ...restProps }: SliderPrimitive.RootProps = $props();
 </script>
 
 <div class="grid gap-2 pt-2">
@@ -23,10 +23,11 @@
 					<Slider
 						id="maxlength"
 						max={4000}
-						bind:value
+						bind:value={value as never}
 						step={10}
 						class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
 						aria-label="Maximum Length"
+						{...restProps}
 					/>
 				</div>
 			{/snippet}

sites/docs/src/routes/(app)/examples/playground/(components)/temperature-selector.svelte

@@ -4,7 +4,7 @@
 	import { Label } from "$lib/registry/new-york/ui/label/index.js";
 	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
 
-	let { value = $bindable() }: SliderPrimitive.RootProps = $props();
+	let { value = $bindable(), ...restProps }: SliderPrimitive.RootProps = $props();
 </script>
 
 <div class="grid gap-2 pt-2">
@@ -23,10 +23,11 @@
 					<Slider
 						id="temperature"
 						max={1}
-						bind:value
+						bind:value={value as never}
 						step={0.1}
 						class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
 						aria-label="Temperature"
+						{...restProps}
 					/>
 				</div>
 			{/snippet}

sites/docs/src/routes/(app)/examples/playground/(components)/top-p-selector.svelte

@@ -4,7 +4,7 @@
 	import { Label } from "$lib/registry/new-york/ui/label/index.js";
 	import { Slider } from "$lib/registry/new-york/ui/slider/index.js";
 
-	let { value = $bindable() }: SliderPrimitive.RootProps = $props();
+	let { value = $bindable(), ...restProps }: SliderPrimitive.RootProps = $props();
 </script>
 
 <div class="grid gap-2 pt-2">
@@ -23,10 +23,11 @@
 					<Slider
 						id="top-p"
 						max={1}
-						bind:value
+						bind:value={value as never}
 						step={0.1}
 						class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
 						aria-label="Top P"
+						{...restProps}
 					/>
 				</div>
 			{/snippet}

sites/docs/src/routes/(app)/examples/playground/+page.svelte

@@ -235,9 +235,9 @@
 						</Tabs.List>
 					</div>
 					<ModelSelector {types} {models} />
-					<TemperatureSelector value={[0.56]} />
-					<MaxLengthSelector value={[256]} />
-					<TopPSelector value={[0.9]} />
+					<TemperatureSelector type="single" value={0.56} />
+					<MaxLengthSelector type="single" value={256} />
+					<TopPSelector type="single" value={0.9} />
 				</div>
 				<div class="md:order-1">
 					<Tabs.Content value="complete" class="mt-0 border-0 p-0">