breaking: Slider type for number or number[] value (#1032)

huntabyte · Dec 31, 2024 · 91913f4 · 91913f4
1 parent abbdae0
commit 91913f4
Show file tree

Hide file tree

Showing 18 changed files with 648 additions and 211 deletions.
diff --git a/.changeset/dry-spiders-learn.md b/.changeset/dry-spiders-learn.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+breaking: `Slider.Root` now requires a `type` prop to specify whether the slider should be a `"single"` or `"multiple"` slider, which determines whether the value and change function arguments should be of type `number` or `number[]`
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -48,7 +48,7 @@ class AccordionBaseState {
 		this.#ref = props.ref;
 
 		useRefById({
-			id: props.id,
+			id: this.#id,
 			ref: this.#ref,
 		});
 

diff --git a/packages/bits-ui/src/lib/bits/slider/components/slider.svelte b/packages/bits-ui/src/lib/bits/slider/components/slider.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { box, mergeProps, type WritableBox } from "svelte-toolbelt";
 	import type { SliderRootProps } from "../types.js";
 	import { useSliderRoot } from "../slider.svelte.js";
 	import { useId } from "$lib/internal/use-id.js";
@@ -10,7 +10,8 @@
 		child,
 		id = useId(),
 		ref = $bindable(null),
-		value = $bindable([]),
+		value = $bindable(),
+		type,
 		onValueChange = noop,
 		onValueCommit = noop,
 		disabled = false,
@@ -24,6 +25,10 @@
 		...restProps
 	}: SliderRootProps = $props();
 
+	if (value === undefined) {
+		value = type === "single" ? 0 : [];
+	}
+
 	const rootState = useSliderRoot({
 		id: box.with(() => id),
 		ref: box.with(
@@ -34,13 +39,16 @@
 			() => value,
 			(v) => {
 				if (controlledValue) {
+					// @ts-expect-error - we know
 					onValueChange(v);
 				} else {
 					value = v;
+					// @ts-expect-error - we know
 					onValueChange(v);
 				}
 			}
-		),
+		) as WritableBox<number> | WritableBox<number[]>,
+		// @ts-expect-error - we know
 		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
@@ -49,6 +57,7 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		type,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));