From 91913f4fbddbc7990426ad1d769f88a748c2c92c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 30 Dec 2024 21:28:27 -0500
Subject: [PATCH] breaking: Slider `type` for `number` or `number[]` value 
 (#1032)

---
 .changeset/dry-spiders-learn.md               |   5 +
 .../lib/bits/accordion/accordion.svelte.ts    |   2 +-
 .../lib/bits/slider/components/slider.svelte  |  15 +-
 .../src/lib/bits/slider/slider.svelte.ts      | 416 +++++++++++++++---
 packages/bits-ui/src/lib/bits/slider/types.ts | 219 +++++----
 .../src/tests/slider/slider-range-test.svelte |   8 +-
 ...r-test.svelte => slider-test-multi.svelte} |   8 +-
 .../tests/src/tests/slider/slider.test.ts     |  14 +-
 sites/docs/content/components/slider.md       |  79 +++-
 .../api-ref/prop-type-content.svelte          |   4 +-
 .../src/lib/components/api-section.svelte     |   2 +-
 sites/docs/src/lib/components/demos/index.ts  |   1 +
 .../demos/slider-demo-multiple.svelte         |  30 ++
 .../lib/components/demos/slider-demo.svelte   |  28 +-
 .../slider/slider-root-on-value-change.md     |   3 +
 .../src/lib/content/api-reference/helpers.ts  |   2 +-
 .../lib/content/api-reference/slider.api.ts   |  21 +-
 .../docs/src/routes/(main)/sink/+page.svelte  |   2 +-
 18 files changed, 648 insertions(+), 211 deletions(-)
 create mode 100644 .changeset/dry-spiders-learn.md
 rename packages/tests/src/tests/slider/{slider-test.svelte => slider-test-multi.svelte} (81%)
 create mode 100644 sites/docs/src/lib/components/demos/slider-demo-multiple.svelte

diff --git a/.changeset/dry-spiders-learn.md b/.changeset/dry-spiders-learn.md
new file mode 100644
index 000000000..10953a5e8
--- /dev/null
+++ 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
index 0bec3e6e7..a081d1974 100644
--- 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
index 4ef4cf618..0fadb6855 100644
--- 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));
diff --git a/packages/bits-ui/src/lib/bits/slider/slider.svelte.ts b/packages/bits-ui/src/lib/bits/slider/slider.svelte.ts
index db18c7cf5..7a2a9d924 100644
--- a/packages/bits-ui/src/lib/bits/slider/slider.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/slider/slider.svelte.ts
@@ -3,9 +3,15 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, useRefById } from "svelte-toolbelt";
+import {
+	executeCallbacks,
+	onMountEffect,
+	useRefById,
+	type Box,
+	type ReadableBox,
+} from "svelte-toolbelt";
 import { on } from "svelte/events";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles } from "./helpers.js";
 import {
 	getAriaDisabled,
@@ -26,7 +32,7 @@ const SLIDER_THUMB_ATTR = "data-slider-thumb";
 const SLIDER_RANGE_ATTR = "data-slider-range";
 const SLIDER_TICK_ATTR = "data-slider-tick";
 
-type SliderRootStateProps = WithRefProps<
+type SliderBaseRootStateProps = WithRefProps<
 	ReadableBoxedValues<{
 		disabled: boolean;
 		orientation: Orientation;
@@ -35,27 +41,20 @@ type SliderRootStateProps = WithRefProps<
 		step: number;
 		dir: Direction;
 		autoSort: boolean;
-		onValueCommit: OnChangeFn<number[]>;
-	}> &
-		WritableBoxedValues<{
-			value: number[];
-		}>
+	}>
 >;
 
-class SliderRootState {
-	id: SliderRootStateProps["id"];
-	ref: SliderRootStateProps["ref"];
-	value: SliderRootStateProps["value"];
-	disabled: SliderRootStateProps["disabled"];
-	orientation: SliderRootStateProps["orientation"];
-	min: SliderRootStateProps["min"];
-	max: SliderRootStateProps["max"];
-	step: SliderRootStateProps["step"];
-	dir: SliderRootStateProps["dir"];
-	autoSort: SliderRootStateProps["autoSort"];
-	activeThumb = $state<{ node: HTMLElement; idx: number } | null>(null);
+class SliderBaseRootState {
+	id: SliderBaseRootStateProps["id"];
+	ref: SliderBaseRootStateProps["ref"];
+	disabled: SliderBaseRootStateProps["disabled"];
+	orientation: SliderBaseRootStateProps["orientation"];
+	min: SliderBaseRootStateProps["min"];
+	max: SliderBaseRootStateProps["max"];
+	step: SliderBaseRootStateProps["step"];
+	dir: SliderBaseRootStateProps["dir"];
+	autoSort: SliderBaseRootStateProps["autoSort"];
 	isActive = $state(false);
-	currentThumbIdx = $state(0);
 	direction: "rl" | "lr" | "tb" | "bt" = $derived.by(() => {
 		if (this.orientation.current === "horizontal") {
 			return this.dir.current === "rtl" ? "rl" : "lr";
@@ -63,9 +62,8 @@ class SliderRootState {
 			return this.dir.current === "rtl" ? "tb" : "bt";
 		}
 	});
-	onValueCommit: SliderRootStateProps["onValueCommit"];
 
-	constructor(props: SliderRootStateProps) {
+	constructor(props: SliderBaseRootStateProps) {
 		this.id = props.id;
 		this.ref = props.ref;
 		this.disabled = props.disabled;
@@ -75,15 +73,57 @@ class SliderRootState {
 		this.step = props.step;
 		this.dir = props.dir;
 		this.autoSort = props.autoSort;
-		this.value = props.value;
-		this.onValueCommit = props.onValueCommit;
 
 		useRefById({
 			id: this.id,
 			ref: this.ref,
 		});
+	}
 
-		$effect(() => {
+	#touchAction = $derived.by(() => {
+		if (this.disabled.current) return undefined;
+		return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
+	});
+
+	getAllThumbs = () => {
+		const node = this.ref.current;
+		if (!node) return [];
+		return Array.from(node.querySelectorAll<HTMLElement>(`[${SLIDER_THUMB_ATTR}]`));
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.current,
+				"data-orientation": getDataOrientation(this.orientation.current),
+				"data-disabled": getDataDisabled(this.disabled.current),
+				style: {
+					touchAction: this.#touchAction,
+				},
+				[SLIDER_ROOT_ATTR]: "",
+			}) as const
+	);
+}
+
+type SliderSingleRootStateProps = SliderBaseRootStateProps &
+	ReadableBoxedValues<{
+		onValueCommit: OnChangeFn<number>;
+	}> &
+	WritableBoxedValues<{
+		value: number;
+	}>;
+
+class SliderSingleRootState extends SliderBaseRootState {
+	value: SliderSingleRootStateProps["value"];
+	onValueCommit: SliderSingleRootStateProps["onValueCommit"];
+	isMulti = false as const;
+
+	constructor(props: SliderSingleRootStateProps) {
+		super(props);
+		this.value = props.value;
+		this.onValueCommit = props.onValueCommit;
+
+		onMountEffect(() => {
 			return executeCallbacks(
 				on(document, "pointerdown", this.handlePointerDown),
 				on(document, "pointerup", this.handlePointerUp),
@@ -92,25 +132,261 @@ class SliderRootState {
 			);
 		});
 
-		$effect(() => {
-			const step = this.step.current;
-			const min = this.min.current;
-			const max = this.max.current;
-			const value = this.value.current;
+		watch(
+			[
+				() => this.step.current,
+				() => this.min.current,
+				() => this.max.current,
+				() => this.value.current,
+			],
+			([step, min, max, value]) => {
+				const isValidValue = (v: number) => {
+					const snappedValue = snapValueToStep(v, min, max, step);
+					return snappedValue === v;
+				};
+
+				const gcv = (v: number) => {
+					return snapValueToStep(v, min, max, step);
+				};
+
+				if (!isValidValue(value)) {
+					this.value.current = gcv(value);
+				}
+			}
+		);
+	}
+
+	applyPosition({ clientXY, start, end }: { clientXY: number; start: number; end: number }) {
+		const min = this.min.current;
+		const max = this.max.current;
+		const percent = (clientXY - start) / (end - start);
+		const val = percent * (max - min) + min;
 
-			const isValidValue = (v: number) => {
-				const snappedValue = snapValueToStep(v, min, max, step);
-				return snappedValue === v;
-			};
+		if (val < min) {
+			this.updateValue(min);
+		} else if (val > max) {
+			this.updateValue(max);
+		} else {
+			const step = this.step.current;
 
-			const gcv = (v: number) => {
-				return snapValueToStep(v, min, max, step);
-			};
+			const currStep = Math.floor((val - min) / step);
+			const midpointOfCurrStep = min + currStep * step + step / 2;
+			const midpointOfNextStep = min + (currStep + 1) * step + step / 2;
+			const newValue =
+				val >= midpointOfCurrStep && val < midpointOfNextStep
+					? (currStep + 1) * step + min
+					: currStep * step + min;
 
-			if (value.some((v) => !isValidValue(v))) {
-				this.value.current = value.map(gcv);
+			if (newValue <= max) {
+				this.updateValue(newValue);
 			}
+		}
+	}
+
+	updateValue = (newValue: number) => {
+		this.value.current = snapValueToStep(
+			newValue,
+			this.min.current,
+			this.max.current,
+			this.step.current
+		);
+	};
+
+	handlePointerMove = (e: PointerEvent) => {
+		if (!this.isActive || this.disabled.current) return;
+		e.preventDefault();
+		e.stopPropagation();
+
+		const sliderNode = this.ref.current;
+		const activeThumb = this.getAllThumbs()[0];
+		if (!sliderNode || !activeThumb) return;
+
+		activeThumb.focus();
+
+		const { left, right, top, bottom } = sliderNode.getBoundingClientRect();
+
+		if (this.direction === "lr") {
+			this.applyPosition({
+				clientXY: e.clientX,
+				start: left,
+				end: right,
+			});
+		} else if (this.direction === "rl") {
+			this.applyPosition({
+				clientXY: e.clientX,
+				start: right,
+				end: left,
+			});
+		} else if (this.direction === "bt") {
+			this.applyPosition({
+				clientXY: e.clientY,
+				start: bottom,
+				end: top,
+			});
+		} else if (this.direction === "tb") {
+			this.applyPosition({
+				clientXY: e.clientY,
+				start: top,
+				end: bottom,
+			});
+		}
+	};
+
+	handlePointerDown = (e: PointerEvent) => {
+		if (e.button !== 0 || this.disabled.current) return;
+		const sliderNode = this.ref.current;
+		const closestThumb = this.getAllThumbs()[0];
+		if (!closestThumb || !sliderNode) return;
+
+		const target = e.target;
+		if (!isElementOrSVGElement(target) || !sliderNode.contains(target)) return;
+		e.preventDefault();
+
+		closestThumb.focus();
+		this.isActive = true;
+
+		this.handlePointerMove(e);
+	};
+
+	handlePointerUp = () => {
+		if (this.disabled.current) return;
+		if (this.isActive) {
+			this.onValueCommit.current(untrack(() => this.value.current));
+		}
+		this.isActive = false;
+	};
+
+	getPositionFromValue = (thumbValue: number) => {
+		const min = this.min.current;
+		const max = this.max.current;
+
+		return ((thumbValue - min) / (max - min)) * 100;
+	};
+
+	thumbsPropsArr = $derived.by(() => {
+		const currValue = this.value.current;
+		return Array.from({ length: 1 }, () => {
+			const thumbValue = currValue;
+			const thumbPosition = this.getPositionFromValue(thumbValue ?? 0);
+			const style = getThumbStyles(this.direction, thumbPosition);
+
+			return {
+				role: "slider",
+				"aria-valuemin": this.min.current,
+				"aria-valuemax": this.max.current,
+				"aria-valuenow": thumbValue,
+				"aria-disabled": getAriaDisabled(this.disabled.current),
+				"aria-orientation": getAriaOrientation(this.orientation.current),
+				"data-value": thumbValue,
+				tabindex: this.disabled.current ? -1 : 0,
+				style,
+				[SLIDER_THUMB_ATTR]: "",
+			} as const;
+		});
+	});
+
+	thumbsRenderArr = $derived.by(() => {
+		return this.thumbsPropsArr.map((_, i) => i);
+	});
+
+	ticksPropsArr = $derived.by(() => {
+		const max = this.max.current;
+		const min = this.min.current;
+		const step = this.step.current;
+		const difference = max - min;
+
+		let count = Math.ceil(difference / step);
+
+		if (difference % step == 0) {
+			count++;
+		}
+		const currValue = this.value.current;
+
+		return Array.from({ length: count }, (_, i) => {
+			const tickPosition = i * (step / difference) * 100;
+
+			const isFirst = i === 0;
+			const isLast = i === count - 1;
+			const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
+			const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+			const tickValue = min + i * step;
+			const bounded = tickValue <= currValue;
+
+			return {
+				"data-disabled": getDataDisabled(this.disabled.current),
+				"data-orientation": getDataOrientation(this.orientation.current),
+				"data-bounded": bounded ? "" : undefined,
+				"data-value": tickValue,
+				style,
+				[SLIDER_TICK_ATTR]: "",
+			} as const;
 		});
+	});
+
+	ticksRenderArr = $derived.by(() => {
+		return this.ticksPropsArr.map((_, i) => i);
+	});
+
+	snippetProps = $derived.by(
+		() =>
+			({
+				ticks: this.ticksRenderArr,
+				thumbs: this.thumbsRenderArr,
+			}) as const
+	);
+}
+
+type SliderMultiRootStateProps = SliderBaseRootStateProps &
+	ReadableBoxedValues<{
+		onValueCommit: OnChangeFn<number[]>;
+	}> &
+	WritableBoxedValues<{
+		value: number[];
+	}>;
+
+class SliderMultiRootState extends SliderBaseRootState {
+	value: SliderMultiRootStateProps["value"];
+	isMulti = true as const;
+	activeThumb = $state<{ node: HTMLElement; idx: number } | null>(null);
+	currentThumbIdx = $state(0);
+	onValueCommit: SliderMultiRootStateProps["onValueCommit"];
+
+	constructor(props: SliderMultiRootStateProps) {
+		super(props);
+		this.value = props.value;
+		this.onValueCommit = props.onValueCommit;
+
+		onMountEffect(() => {
+			return executeCallbacks(
+				on(document, "pointerdown", this.handlePointerDown),
+				on(document, "pointerup", this.handlePointerUp),
+				on(document, "pointermove", this.handlePointerMove),
+				on(document, "pointerleave", this.handlePointerUp)
+			);
+		});
+
+		watch(
+			[
+				() => this.step.current,
+				() => this.min.current,
+				() => this.max.current,
+				() => this.value.current,
+			],
+			([step, min, max, value]) => {
+				const isValidValue = (v: number) => {
+					const snappedValue = snapValueToStep(v, min, max, step);
+					return snappedValue === v;
+				};
+
+				const gcv = (v: number) => {
+					return snapValueToStep(v, min, max, step);
+				};
+
+				if (value.some((v) => !isValidValue(v))) {
+					this.value.current = value.map(gcv);
+				}
+			}
+		);
 	}
 
 	applyPosition({
@@ -384,24 +660,6 @@ class SliderRootState {
 				thumbs: this.thumbsRenderArr,
 			}) as const
 	);
-
-	#touchAction = $derived.by(() => {
-		if (this.disabled.current) return undefined;
-		return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
-	});
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.id.current,
-				"data-orientation": getDataOrientation(this.orientation.current),
-				"data-disabled": getDataDisabled(this.disabled.current),
-				style: {
-					touchAction: this.#touchAction,
-				},
-				[SLIDER_ROOT_ATTR]: "",
-			}) as const
-	);
 }
 
 const VALID_SLIDER_KEYS = [
@@ -432,10 +690,14 @@ class SliderRangeState {
 	}
 
 	rangeStyles = $derived.by(() => {
-		const value = this.#root.value.current;
-		const min = value.length > 1 ? this.#root.getPositionFromValue(Math.min(...value) ?? 0) : 0;
-		const max = 100 - this.#root.getPositionFromValue(Math.max(...value) ?? 0);
-
+		const min = Array.isArray(this.#root.value.current)
+			? this.#root.value.current.length > 1
+				? this.#root.getPositionFromValue(Math.min(...this.#root.value.current) ?? 0)
+				: 0
+			: 0;
+		const max = Array.isArray(this.#root.value.current)
+			? 100 - this.#root.getPositionFromValue(Math.max(...this.#root.value.current) ?? 0)
+			: 100 - this.#root.getPositionFromValue(this.#root.value.current);
 		return {
 			position: "absolute",
 			...getRangeStyles(this.#root.direction, min, max),
@@ -482,7 +744,11 @@ class SliderThumbState {
 	}
 
 	#updateValue(newValue: number) {
-		this.#root.updateValue(newValue, this.#index.current);
+		if (this.#root.isMulti) {
+			this.#root.updateValue(newValue, this.#index.current);
+		} else {
+			this.#root.updateValue(newValue);
+		}
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
@@ -493,7 +759,9 @@ class SliderThumbState {
 		if (!thumbs.length) return;
 
 		const idx = thumbs.indexOf(currNode);
-		this.#root.currentThumbIdx = idx;
+		if (this.#root.isMulti) {
+			this.#root.currentThumbIdx = idx;
+		}
 
 		if (!VALID_SLIDER_KEYS.includes(e.key)) return;
 
@@ -502,7 +770,7 @@ class SliderThumbState {
 		const min = this.#root.min.current;
 		const max = this.#root.max.current;
 		const value = this.#root.value.current;
-		const thumbValue = value[idx]!;
+		const thumbValue = Array.isArray(value) ? value[idx]! : value;
 		const orientation = this.#root.orientation.current;
 		const direction = this.#root.direction;
 		const step = this.#root.step.current;
@@ -557,6 +825,7 @@ class SliderThumbState {
 				}
 				break;
 		}
+		// @ts-expect-error - this is fine
 		this.#root.onValueCommit.current(this.#root.value.current);
 	}
 
@@ -602,10 +871,23 @@ class SliderTickState {
 	);
 }
 
+type SliderRootState = SliderSingleRootState | SliderMultiRootState;
+
+type InitSliderRootStateProps = {
+	type: "single" | "multiple";
+	value: Box<number> | Box<number[]>;
+	onValueCommit: ReadableBox<OnChangeFn<number>> | ReadableBox<OnChangeFn<number[]>>;
+} & Omit<SliderBaseRootStateProps, "type">;
+
 const SliderRootContext = new Context<SliderRootState>("Slider.Root");
 
-export function useSliderRoot(props: SliderRootStateProps) {
-	return SliderRootContext.set(new SliderRootState(props));
+export function useSliderRoot(props: InitSliderRootStateProps) {
+	const { type, ...rest } = props;
+	const rootState =
+		type === "single"
+			? new SliderSingleRootState(rest as SliderSingleRootStateProps)
+			: new SliderMultiRootState(rest as SliderMultiRootStateProps);
+	return SliderRootContext.set(rootState);
 }
 
 export function useSliderRange(props: SliderRangeStateProps) {
diff --git a/packages/bits-ui/src/lib/bits/slider/types.ts b/packages/bits-ui/src/lib/bits/slider/types.ts
index d3e8aaeda..a6c43f95e 100644
--- a/packages/bits-ui/src/lib/bits/slider/types.ts
+++ b/packages/bits-ui/src/lib/bits/slider/types.ts
@@ -7,91 +7,140 @@ export type SliderRootSnippetProps = {
 	thumbs: number[];
 };
 
-export type SliderRootPropsWithoutHTML = WithChild<
-	{
-		/**
-		 * The value of the slider.
-		 * @bindable
-		 */
-		value?: number[];
-
-		/**
-		 * A callback function called when the value changes.
-		 */
-		onValueChange?: OnChangeFn<number[]>;
-
-		/**
-		 * A callback function called when the user stops dragging the thumb,
-		 * which is useful for knowing when the user has finished interacting with the
-		 * slider and _commits_ the value.
-		 */
-		onValueCommit?: OnChangeFn<number[]>;
-
-		/**
-		 * Whether to automatically sort the values in the array when moving thumbs past
-		 * one another.
-		 *
-		 * @defaultValue true
-		 */
-		autoSort?: boolean;
-		/**
-		 * The minimum value of the slider.
-		 *
-		 * @defaultValue 0
-		 */
-		min?: number;
-
-		/**
-		 * The maximum value of the slider.
-		 *
-		 * @defaultValue 100
-		 */
-		max?: number;
-
-		/**
-		 * The amount to increment the value by when the user presses the arrow keys.
-		 *
-		 * @defayltValue 1
-		 */
-		step?: number;
-
-		/**
-		 * The direction of the slider.
-		 *
-		 * For vertical sliders, setting `dir` to `'rtl'` will caus the slider to start
-		 * from the top and move downwards. For horizontal sliders, setting `dir` to `'rtl'`
-		 * will cause the slider to start from the left and move rightwards.
-		 *
-		 * @defaultValue 'ltr'
-		 */
-		dir?: Direction;
-
-		/**
-		 * The orientation of the slider.
-		 *
-		 * @defaultValue "horizontal"
-		 */
-		orientation?: Orientation;
-
-		/**
-		 * Whether the slider is disabled or not.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-
-		/**
-		 * Whether or not the value state is controlled or not. If `true`, the component will
-		 * not update the value state internally, instead it will call `onValueChange` when it
-		 * would have otherwise, and it is up to you to update the `value` prop that is passed
-		 * to the component.
-		 *
-		 * @defaultValue false
-		 */
-		controlledValue?: boolean;
-	},
-	SliderRootSnippetProps
->;
+export type BaseSliderRootPropsWithoutHTML = {
+	/**
+	 * Whether to automatically sort the values in the array when moving thumbs past
+	 * one another.
+	 *
+	 * @defaultValue true
+	 */
+	autoSort?: boolean;
+	/**
+	 * The minimum value of the slider.
+	 *
+	 * @defaultValue 0
+	 */
+	min?: number;
+
+	/**
+	 * The maximum value of the slider.
+	 *
+	 * @defaultValue 100
+	 */
+	max?: number;
+
+	/**
+	 * The amount to increment the value by when the user presses the arrow keys.
+	 *
+	 * @defaultValue 1
+	 */
+	step?: number;
+
+	/**
+	 * The direction of the slider.
+	 *
+	 * For vertical sliders, setting `dir` to `'rtl'` will caus the slider to start
+	 * from the top and move downwards. For horizontal sliders, setting `dir` to `'rtl'`
+	 * will cause the slider to start from the left and move rightwards.
+	 *
+	 * @defaultValue 'ltr'
+	 */
+	dir?: Direction;
+
+	/**
+	 * The orientation of the slider.
+	 *
+	 * @defaultValue "horizontal"
+	 */
+	orientation?: Orientation;
+
+	/**
+	 * Whether the slider is disabled or not.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether or not the value state is controlled or not. If `true`, the component will
+	 * not update the value state internally, instead it will call `onValueChange` when it
+	 * would have otherwise, and it is up to you to update the `value` prop that is passed
+	 * to the component.
+	 *
+	 * @defaultValue false
+	 */
+	controlledValue?: boolean;
+};
+
+export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+	/**
+	 * The type of slider. If set to `'multiple'`, the slider will
+	 * allow multiple ticks and the `value` will be an array of numbers.
+	 *
+	 * @required
+	 */
+	type: "single";
+
+	/**
+	 * The value of the slider.
+	 * @bindable
+	 */
+	value?: number;
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<number>;
+
+	/**
+	 * A callback function called when the user stops dragging the
+	 * thumb and the value is committed.
+	 */
+	onValueCommit?: OnChangeFn<number>;
+};
+
+export type SliderMultiRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+	/**
+	 * The type of slider. If set to `'multiple'`, the slider will
+	 * allow multiple ticks and the `value` will be an array of numbers.
+	 *
+	 * @required
+	 */
+	type: "multiple";
+
+	/**
+	 * The value of the slider.
+	 * @bindable
+	 */
+	value?: number[];
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<number[]>;
+
+	/**
+	 * A callback function called when the user stops dragging the
+	 * thumb and the value is committed.
+	 */
+	onValueCommit?: OnChangeFn<number[]>;
+};
+
+export type SliderRootPropsWithoutHTML =
+	| WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps>
+	| WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>;
+
+export type SliderSingleRootProps = SliderSingleRootPropsWithoutHTML &
+	Without<
+		BitsPrimitiveSpanAttributes,
+		WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps>
+	>;
+
+export type SliderMultipleRootProps = SliderMultiRootPropsWithoutHTML &
+	Without<
+		BitsPrimitiveSpanAttributes,
+		WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>
+	>;
 
 export type SliderRootProps = SliderRootPropsWithoutHTML &
 	Without<BitsPrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
diff --git a/packages/tests/src/tests/slider/slider-range-test.svelte b/packages/tests/src/tests/slider/slider-range-test.svelte
index 795aa0724..554ceb70a 100644
--- a/packages/tests/src/tests/slider/slider-range-test.svelte
+++ b/packages/tests/src/tests/slider/slider-range-test.svelte
@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import { Slider } from "bits-ui";
+	import { Slider, type SliderMultipleRootProps } from "bits-ui";
 
-	export type SliderRangeTestProps = Slider.RootProps;
+	export type SliderMultiRangeTestProps = Omit<SliderMultipleRootProps, "type">;
 </script>
 
 <script lang="ts">
-	let { value = [20, 80], ...restProps }: SliderRangeTestProps = $props();
+	let { value = [20, 80], ...restProps }: SliderMultiRangeTestProps = $props();
 </script>
 
 <main>
-	<Slider.Root data-testid="root" bind:value {...restProps}>
+	<Slider.Root type="multiple" data-testid="root" bind:value {...restProps}>
 		{#snippet children({ thumbs, ticks })}
 			<span class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
 				<Slider.Range data-testid="range" class="bg-primary absolute h-full" />
diff --git a/packages/tests/src/tests/slider/slider-test.svelte b/packages/tests/src/tests/slider/slider-test-multi.svelte
similarity index 81%
rename from packages/tests/src/tests/slider/slider-test.svelte
rename to packages/tests/src/tests/slider/slider-test-multi.svelte
index 01b65fd65..39708807e 100644
--- a/packages/tests/src/tests/slider/slider-test.svelte
+++ b/packages/tests/src/tests/slider/slider-test-multi.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
-	import { Slider } from "bits-ui";
+	import { Slider, type SliderMultipleRootProps } from "bits-ui";
 
-	export type SliderTestProps = Slider.RootProps & {
+	export type SliderMultiTestProps = Omit<SliderMultipleRootProps, "type"> & {
 		resetMin?: number;
 		resetMax?: number;
 		resetStep?: number;
@@ -18,7 +18,7 @@
 		resetMax,
 		resetStep,
 		...restProps
-	}: SliderTestProps = $props();
+	}: SliderMultiTestProps = $props();
 
 	$effect(() => {
 		if (resetMin !== undefined) {
@@ -38,7 +38,7 @@
 </script>
 
 <main>
-	<Slider.Root data-testid="root" bind:value {...restProps} {min} {max} {step}>
+	<Slider.Root type="multiple" data-testid="root" bind:value {...restProps} {min} {max} {step}>
 		{#snippet children({ thumbs, ticks })}
 			<span class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
 				<Slider.Range data-testid="range" class="bg-primary absolute h-full" />
diff --git a/packages/tests/src/tests/slider/slider.test.ts b/packages/tests/src/tests/slider/slider.test.ts
index e5e0900c0..f8f63f744 100644
--- a/packages/tests/src/tests/slider/slider.test.ts
+++ b/packages/tests/src/tests/slider/slider.test.ts
@@ -3,19 +3,19 @@ import { render } from "@testing-library/svelte";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { getTestKbd, setupUserEvents } from "../utils.js";
-import SliderTest, { type SliderTestProps } from "./slider-test.svelte";
-import SliderRangeTest, { type SliderRangeTestProps } from "./slider-range-test.svelte";
+import SliderMultiTest, { type SliderMultiTestProps } from "./slider-test-multi.svelte";
+import SliderRangeTest, { type SliderMultiRangeTestProps } from "./slider-range-test.svelte";
 
 const kbd = getTestKbd();
 
-function renderSlider(props: SliderTestProps = {}) {
-	return render(SliderTest, { ...props });
+function renderSlider(props: SliderMultiTestProps = {}) {
+	return render(SliderMultiTest, { ...props });
 }
-function renderSliderRange(props: SliderRangeTestProps = {}) {
+function renderSliderRange(props: SliderMultiRangeTestProps = {}) {
 	return render(SliderRangeTest, { ...props });
 }
 
-function setup(props: SliderTestProps = {}, kind: "default" | "range" = "default") {
+function setup(props: SliderMultiTestProps = {}, kind: "default" | "range" = "default") {
 	const user = setupUserEvents();
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let returned: any;
@@ -31,7 +31,7 @@ function setup(props: SliderTestProps = {}, kind: "default" | "range" = "default
 
 describe("slider (default)", () => {
 	it("should have no accessibility violations", async () => {
-		const { container } = render(SliderTest);
+		const { container } = render(SliderMultiTest);
 
 		expect(await axe(container)).toHaveNoViolations();
 	});
diff --git a/sites/docs/content/components/slider.md b/sites/docs/content/components/slider.md
index d5868a030..c57885d7d 100644
--- a/sites/docs/content/components/slider.md
+++ b/sites/docs/content/components/slider.md
@@ -4,7 +4,7 @@ description: Allows users to select a value from a continuous range by sliding a
 ---
 
 <script>
-	import { APISection, ComponentPreviewV2, SliderDemo, Callout } from '$lib/components/index.js'
+	import { APISection, ComponentPreviewV2, SliderDemo, SliderDemoMultiple, Callout } from '$lib/components/index.js'
 	export let schemas;
 </script>
 
@@ -36,16 +36,22 @@ Bits UI provides primitives that enable you to build your own custom slider comp
 
 Here's an example of how you might create a reusable `MySlider` component.
 
-```svelte title="MySlider.svelte"
+```svelte title="MyMultiSlider.svelte"
 <script lang="ts">
+	import type { ComponentProps } from "svelte";
 	import { Slider } from "bits-ui";
 
-	type Props = WithoutChildren<Slider.RootProps>;
+	type Props = WithoutChildren<ComponentProps<typeof Slider.Root>>;
 
 	let { value = $bindable(), ref = $bindable(null), ...restProps }: Props = $props();
 </script>
 
-<Slider.Root bind:value bind:ref {...restProps}>
+<!--
+ Since we have to destructure the `value` to make it `$bindable`, we need to use `as any` here to avoid
+ type errors from the discriminated union of `"single" | "multiple"`.
+ (an unfortunate consequence of having to destructure bindable values)
+  -->
+<Slider.Root bind:value bind:ref {...restProps as any}>
 	{#snippet children({ thumbs, ticks })}
 		<Slider.Range />
 		{#each thumbs as index}
@@ -65,10 +71,12 @@ You can then use the `MySlider` component in your application like so:
 <script lang="ts">
 	import MySlider from "$lib/components/MySlider.svelte";
 
-	let someValue = $state([5, 10]);
+	let multiValue = $state([5, 10]);
+	let singleValue = $state(50);
 </script>
 
-<MySlider bind:value={someValue} />
+<MySlider bind:value={multiValue} type="multiple" />
+<MySlider bind:value={singleValue} type="single" />
 ```
 
 ## Managing Value State
@@ -82,12 +90,12 @@ For seamless state synchronization, use Svelte's `bind:value` directive. This me
 ```svelte
 <script lang="ts">
 	import { Slider } from "bits-ui";
-	let myValue = $state([0]);
+	let myValue = $state(0);
 </script>
 
-<button onclick={() => (myValue = [20])}> Set value to 20 </button>
+<button onclick={() => (myValue = 20)}> Set value to 20 </button>
 
-<Slider.Root bind:value={myValue}>
+<Slider.Root bind:value={myValue} type="single">
 	<!-- ... -->
 </Slider.Root>
 ```
@@ -105,10 +113,11 @@ For more granular control or to perform additional logic on state changes, use t
 ```svelte
 <script lang="ts">
 	import { Slider } from "bits-ui";
-	let myValue = $state([0]);
+	let myValue = $state(0);
 </script>
 
 <Slider.Root
+	type="single"
 	value={myValue}
 	onValueChange={(v) => {
 		myValue = v;
@@ -138,10 +147,10 @@ To implement controlled state:
 ```svelte
 <script lang="ts">
 	import { Slider } from "bits-ui";
-	let myValue = $state([0]);
+	let myValue = $state(0);
 </script>
 
-<Slider.Root controlledValue value={myValue} onValueChange={(v) => (myValue = v)}>
+<Slider.Root type="single" controlledValue value={myValue} onValueChange={(v) => (myValue = v)}>
 	<!-- ... -->
 </Slider.Root>
 ```
@@ -180,10 +189,11 @@ If the `value` prop has more than one value, the slider will render multiple thu
 <script lang="ts">
 	import { Slider } from "bits-ui";
 
+	// we have two numbers in the array, so the slider will render two thumbs
 	let value = $state([5, 7]);
 </script>
 
-<Slider.Root min={0} max={10} step={1} bind:value>
+<Slider.Root type="multiple" min={0} max={10} step={1} bind:value>
 	{#snippet children({ ticks, thumbs })}
 		<Slider.Range />
 
@@ -200,12 +210,44 @@ If the `value` prop has more than one value, the slider will render multiple thu
 
 To determine the number of ticks that will be rendered, you can simply divide the `max` value by the `step` value.
 
+## Single Type
+
+Set the `type` prop to `"single"` to allow only one accordion item to be open at a time.
+
+```svelte /type="single"/
+<Slider.Root type="single" />
+```
+
+<ComponentPreviewV2 name="slider-demo" comp="Slider">
+
+{#snippet preview()}
+<SliderDemo />
+{/snippet}
+
+</ComponentPreviewV2>
+
+## Multiple Type
+
+Set the `type` prop to `"multiple"` to allow multiple accordion items to be open at the same time.
+
+```svelte /type="multiple"/
+<Slider.Root type="multiple" />
+```
+
+<ComponentPreviewV2 name="slider-demo-multiple" comp="Slider">
+
+{#snippet preview()}
+<SliderDemoMultiple />
+{/snippet}
+
+</ComponentPreviewV2>
+
 ## Vertical Orientation
 
 You can use the `orientation` prop to change the orientation of the slider, which defaults to `"horizontal"`.
 
 ```svelte
-<Slider.Root orientation="vertical">
+<Slider.Root type="single" orientation="vertical">
 	<!-- ... -->
 </Slider.Root>
 ```
@@ -215,7 +257,7 @@ You can use the `orientation` prop to change the orientation of the slider, whic
 You can use the `dir` prop to change the reading direction of the slider, which defaults to `"ltr"`.
 
 ```svelte
-<Slider.Root dir="rtl">
+<Slider.Root type="single" dir="rtl">
 	<!-- ... -->
 </Slider.Root>
 ```
@@ -227,7 +269,7 @@ By default, the slider will sort the values from smallest to largest, so if you
 You can disable this behavior by setting the `autoSort` prop to `false`.
 
 ```svelte
-<Slider.Root autoSort={false}>
+<Slider.Root type="multiple" autoSort={false}>
 	<!-- ... -->
 </Slider.Root>
 ```
@@ -245,12 +287,15 @@ Here's an example of how you might do that:
 	import MySlider from "$lib/components/MySlider.svelte";
 
 	let expectedIncome = $state([50, 100]);
+	let desiredIncome = $state(50);
 </script>
 
 <form method="POST">
-	<MySlider bind:value={expectedIncome} />
+	<MySlider type="multiple" bind:value={expectedIncome} />
 	<input type="hidden" name="expectedIncomeStart" value={expectedIncome[0]} />
 	<input type="hidden" name="expectedIncomeEnd" value={expectedIncome[1]} />
+	<MySlider type="single" bind:value={desiredIncome} />
+	<input type="hidden" name="expectedIncomeEnd" value={desiredIncome} />
 	<button type="submit">Submit</button>
 </form>
 ```
diff --git a/sites/docs/src/lib/components/api-ref/prop-type-content.svelte b/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
index 598f4448a..d20ac3414 100644
--- a/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
+++ b/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
@@ -54,7 +54,7 @@
 			preventScroll={false}
 			side="top"
 			sideOffset={10}
-			class="z-50 rounded-card border border-border bg-background p-4 shadow-popover"
+			class="focus-override z-50 rounded-card border border-border bg-background p-4 shadow-popover outline-none"
 		>
 			<div class="max-h-[400px] max-w-[700px] overflow-auto">
 				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
@@ -72,7 +72,7 @@
 		>
 			{@const TypeDef = typeDef}
 			<div
-				class="[&_[data-line]]:!pr-2.5 [&_pre]:!my-0 [&_pre]:!mb-0 [&_pre]:mt-0 [&_pre]:!overflow-x-visible [&_pre]:border-0 [&_pre]:p-0 [&_pre]:!pb-0 [&_pre]:!pt-0"
+				class="[&_[data-line]]:!pr-2.5 [&_pre]:!my-0 [&_pre]:!mb-0 [&_pre]:mt-0 [&_pre]:!overflow-x-visible [&_pre]:border-0 [&_pre]:p-0 [&_pre]:!pb-0 [&_pre]:!pt-0 [&_pre]:!outline-none [&_pre]:!ring-0 [&_pre]:!ring-offset-0"
 			>
 				<TypeDef />
 			</div>
diff --git a/sites/docs/src/lib/components/api-section.svelte b/sites/docs/src/lib/components/api-section.svelte
index 50c1c9e35..2893c61d0 100644
--- a/sites/docs/src/lib/components/api-section.svelte
+++ b/sites/docs/src/lib/components/api-section.svelte
@@ -19,7 +19,7 @@
 				class="inline-flex h-[29px] items-center justify-center rounded-button bg-accent px-3 font-mono text-[17px] font-medium leading-tight tracking-tight dark:text-neutral-900"
 			>
 				<h3 class="font-semibold">
-					<span class="font-normal text-foreground/65 dark:text-neutral-900/50"
+					<span class="font-normal text-foreground/80 dark:text-neutral-900/80"
 						>{$page.data.title.replaceAll(" ", "")}.</span
 					>{schema.title}
 				</h3>
diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
index 37ff648ac..6a059e362 100644
--- a/sites/docs/src/lib/components/demos/index.ts
+++ b/sites/docs/src/lib/components/demos/index.ts
@@ -47,6 +47,7 @@ export { default as ScrollAreaDemo } from "./scroll-area-demo.svelte";
 export { default as ScrollAreaDemoCustom } from "./scroll-area-demo-custom.svelte";
 export { default as SeparatorDemo } from "./separator-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
+export { default as SliderDemoMultiple } from "./slider-demo-multiple.svelte";
 export { default as SwitchDemo } from "./switch-demo.svelte";
 export { default as SwitchDemoCustom } from "./switch-demo-custom.svelte";
 export { default as TabsDemo } from "./tabs-demo.svelte";
diff --git a/sites/docs/src/lib/components/demos/slider-demo-multiple.svelte b/sites/docs/src/lib/components/demos/slider-demo-multiple.svelte
new file mode 100644
index 000000000..fa2ceecd7
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/slider-demo-multiple.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Slider } from "bits-ui";
+	import { cn } from "$lib/utils/styles.js";
+
+	let value = $state([25, 75]);
+</script>
+
+<div class="w-full md:max-w-[280px]">
+	<Slider.Root
+		type="multiple"
+		bind:value
+		class="relative flex w-full touch-none select-none items-center"
+	>
+		{#snippet children({ thumbs })}
+			<span
+				class="relative h-2 w-full grow cursor-pointer overflow-hidden rounded-full bg-dark-10"
+			>
+				<Slider.Range class="absolute h-full bg-foreground" />
+			</span>
+			{#each thumbs as index}
+				<Slider.Thumb
+					{index}
+					class={cn(
+						"block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
+					)}
+				/>
+			{/each}
+		{/snippet}
+	</Slider.Root>
+</div>
diff --git a/sites/docs/src/lib/components/demos/slider-demo.svelte b/sites/docs/src/lib/components/demos/slider-demo.svelte
index ee6a02883..56cd3e599 100644
--- a/sites/docs/src/lib/components/demos/slider-demo.svelte
+++ b/sites/docs/src/lib/components/demos/slider-demo.svelte
@@ -2,23 +2,27 @@
 	import { Slider } from "bits-ui";
 	import { cn } from "$lib/utils/styles.js";
 
-	let value = [50];
+	let value = $state(50);
 </script>
 
 <div class="w-full md:max-w-[280px]">
-	<Slider.Root bind:value class="relative flex w-full touch-none select-none items-center">
-		{#snippet children({ thumbs })}
-			<span class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10">
+	<Slider.Root
+		type="single"
+		bind:value
+		class="relative flex w-full touch-none select-none items-center"
+	>
+		{#snippet children()}
+			<span
+				class="relative h-2 w-full grow cursor-pointer overflow-hidden rounded-full bg-dark-10"
+			>
 				<Slider.Range class="absolute h-full bg-foreground" />
 			</span>
-			{#each thumbs as index}
-				<Slider.Thumb
-					{index}
-					class={cn(
-						"block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
-					)}
-				/>
-			{/each}
+			<Slider.Thumb
+				index={0}
+				class={cn(
+					"block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
+				)}
+			/>
 		{/snippet}
 	</Slider.Root>
 </div>
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/slider/slider-root-on-value-change.md b/sites/docs/src/lib/content/api-reference/extended-types/slider/slider-root-on-value-change.md
index a404482b1..8ad2c4fe0 100644
--- a/sites/docs/src/lib/content/api-reference/extended-types/slider/slider-root-on-value-change.md
+++ b/sites/docs/src/lib/content/api-reference/extended-types/slider/slider-root-on-value-change.md
@@ -1,3 +1,6 @@
 ```ts
+// type="single"
+(value: number) => void
+// type="multiple"
 (value: number[]) => void
 ```
diff --git a/sites/docs/src/lib/content/api-reference/helpers.ts b/sites/docs/src/lib/content/api-reference/helpers.ts
index cb52386b2..508c84bf4 100644
--- a/sites/docs/src/lib/content/api-reference/helpers.ts
+++ b/sites/docs/src/lib/content/api-reference/helpers.ts
@@ -543,7 +543,7 @@ export const dirProp = createEnumProp({
 	definition: DirProp,
 	options: ["ltr", "rtl"],
 	description: "The reading direction of the app.",
-	default: "ltr",
+	default: "'ltr'",
 });
 
 export const orientationDataAttr = createEnumDataAttr({
diff --git a/sites/docs/src/lib/content/api-reference/slider.api.ts b/sites/docs/src/lib/content/api-reference/slider.api.ts
index 41a7f3d2a..3e9b69a2c 100644
--- a/sites/docs/src/lib/content/api-reference/slider.api.ts
+++ b/sites/docs/src/lib/content/api-reference/slider.api.ts
@@ -5,7 +5,7 @@ import type {
 	SliderTickPropsWithoutHTML,
 } from "bits-ui";
 import { SliderRootOnValueChangeProp } from "./extended-types/slider/index.js";
-import { OrientationProp } from "./extended-types/shared/index.js";
+import { OrientationProp, SingleOrMultipleProp } from "./extended-types/shared/index.js";
 import {
 	controlledValueProp,
 	createApiSchema,
@@ -14,6 +14,7 @@ import {
 	createEnumProp,
 	createFunctionProp,
 	createNumberProp,
+	createUnionProp,
 	dirProp,
 	withChildProps,
 } from "$lib/content/api-reference/helpers.js";
@@ -23,10 +24,18 @@ const root = createApiSchema<SliderRootPropsWithoutHTML>({
 	title: "Root",
 	description: "The root slider component which contains the remaining slider components.",
 	props: {
+		type: createUnionProp({
+			options: ["'single'", "'multiple'"],
+			description:
+				"The type of the slider. If set to `'multiple'`, the slider will allow multiple thumbs and the `value` will be an array of numbers.",
+			required: true,
+			definition: SingleOrMultipleProp,
+		}),
 		value: {
-			default: "[]",
-			type: "number[]",
-			description: "The current value of the slider.",
+			default: "0",
+			type: "number",
+			description:
+				"The current value of the slider. If the `type` is set to `'multiple'`, this should be an array of numbers and will default to an empty array.",
 			bindable: true,
 		},
 		onValueChange: createFunctionProp({
@@ -53,7 +62,7 @@ const root = createApiSchema<SliderRootPropsWithoutHTML>({
 		}),
 		orientation: createEnumProp({
 			options: ["horizontal", "vertical"],
-			default: '"horizontal"',
+			default: "'horizontal'",
 			description: "The orientation of the slider.",
 			definition: OrientationProp,
 		}),
@@ -65,7 +74,7 @@ const root = createApiSchema<SliderRootPropsWithoutHTML>({
 		autoSort: createBooleanProp({
 			default: C.TRUE,
 			description:
-				"Whether to automatically sort the values in the array when moving thumbs past one another.",
+				"Whether to automatically sort the values in the array when moving thumbs past one another. This is only applicable to the `'multiple'` type.",
 		}),
 		...withChildProps({ elType: "HTMLSpanElement" }),
 	},
diff --git a/sites/docs/src/routes/(main)/sink/+page.svelte b/sites/docs/src/routes/(main)/sink/+page.svelte
index f4f3a4de1..a80edf4b0 100644
--- a/sites/docs/src/routes/(main)/sink/+page.svelte
+++ b/sites/docs/src/routes/(main)/sink/+page.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <div class="container">
-	<Slider.Root bind:value class="root">
+	<Slider.Root type="multiple" bind:value class="root">
 		{#snippet children({ thumbs })}
 			<div class="track">
 				<Slider.Range class="range" />