fix(Slider): thumb positioning (#2015)

Author: huntabyte

.changeset/fast-suns-write.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Slider): use ResizeObserver to recompute thumb positioning

eslint.config.js

@@ -62,6 +62,7 @@ export default tseslint.config(
 			"packages/bits-ui/.svelte-kit/**/*",
 			"tests/.svelte-kit/**/*",
 			"bundle-analyzer/.temp-bundle-analysis/**/*",
+			".tmp/",
 		],
 	},
 	...oxlint.configs["flat/recommended"],

package.json

@@ -48,7 +48,7 @@
     "pnpm": ">=10.12.1",
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.33.0",
   "private": true,
   "pnpm": {
     "onlyBuiltDependencies": [

packages/bits-ui/src/lib/bits/slider/slider.svelte.ts

@@ -29,6 +29,7 @@ import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "$lib/internal
 import { kbd } from "$lib/internal/kbd.js";
 import { isElementOrSVGElement } from "$lib/internal/is.js";
 import { isValidIndex } from "$lib/internal/arrays.js";
+import { SvelteResizeObserver } from "$lib/internal/svelte-resize-observer.svelte.js";
 import type {
 	BitsKeyboardEvent,
 	OnChangeFn,
@@ -64,6 +65,7 @@ abstract class SliderBaseRootState {
 	readonly opts: SliderBaseRootStateOpts;
 	readonly attachment: RefAttachment;
 	isActive = $state(false);
+	#layoutVersion = $state(0);
 	readonly direction: "rl" | "lr" | "tb" | "bt" = $derived.by(() => {
 		if (this.opts.orientation.current === "horizontal") {
 			return this.opts.dir.current === "rtl" ? "rl" : "lr";
@@ -82,8 +84,13 @@ abstract class SliderBaseRootState {
 		this.opts = opts;
 		this.attachment = attachRef(opts.ref);
 		this.domContext = new DOMContext(this.opts.ref);
+		new SvelteResizeObserver(() => this.opts.ref.current, this.#handleLayoutChange);
 	}
 
+	#handleLayoutChange = (): void => {
+		this.#layoutVersion += 1;
+	};
+
 	isThumbActive(_index: number) {
 		return this.isActive;
 	}
@@ -100,6 +107,8 @@ abstract class SliderBaseRootState {
 	};
 
 	getThumbScale = (): [number, number] => {
+		void this.#layoutVersion;
+
 		// If trackPadding is explicitly set, use it directly instead of calculating from thumb size
 		const trackPadding = this.opts.trackPadding?.current;
 		if (trackPadding !== undefined && trackPadding > 0) {

tests/src/tests/slider/slider-in-accordion-test.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Accordion, Slider } from "bits-ui";
+
+	const items = ["1", "2", "3"] as const;
+</script>
+
+<Accordion.Root type="multiple" value={["1"]}>
+	{#each items as item (item)}
+		<Accordion.Item value={item}>
+			<Accordion.Header>
+				<Accordion.Trigger data-testid="{item}-trigger">Slider {item}</Accordion.Trigger>
+			</Accordion.Header>
+			<Accordion.Content data-testid="{item}-content">
+				<div style="padding: 8px 0;">
+					<Slider.Root type="single" value={0} style="display: flex; width: 100px;">
+						{#snippet children({ thumbItems })}
+							<span
+								style="position: relative; height: 8px; width: 100%; flex-grow: 1; overflow: hidden;"
+							>
+								<Slider.Range data-testid="range-{item}" />
+							</span>
+							{#each thumbItems as { index } (index)}
+								<Slider.Thumb
+									{index}
+									data-testid="thumb-{item}"
+									style="display: block; width: 20px; height: 20px;"
+								/>
+							{/each}
+						{/snippet}
+					</Slider.Root>
+				</div>
+			</Accordion.Content>
+		</Accordion.Item>
+	{/each}
+</Accordion.Root>

tests/src/tests/slider/slider.browser.test.ts

@@ -7,6 +7,7 @@ import SliderRangeTest, { type SliderMultiRangeTestProps } from "./slider-range-
 import SliderWithLabelsTest, {
 	type SliderWithLabelsTestProps,
 } from "./slider-test-with-labels.svelte";
+import SliderInAccordionTest from "./slider-in-accordion-test.svelte";
 import { page, userEvent, type Locator } from "@vitest/browser/context";
 
 const kbd = getTestKbd();
@@ -137,6 +138,19 @@ it("should not allow the value to change when the `disabled` prop is set to true
 	expectPercentage({ percentage: 30, thumb, range });
 });
 
+it("should recalculate thumb position when a hidden slider becomes visible", async () => {
+	render(SliderInAccordionTest);
+
+	const secondThumb = page.getByTestId("thumb-2");
+	await expect.element(secondThumb).toBeInTheDocument();
+
+	await userEvent.click(page.getByTestId("2-trigger"));
+
+	await vi.waitFor(() => {
+		expect(isCloseEnough(10, (secondThumb.element() as HTMLElement).style.left)).toBeTruthy();
+	});
+});
+
 describe("range", () => {
 	it("should have a thumb positioned at 20% of the container and one at 80%", async () => {
 		setup({}, "range");