From 4756682863f4a7f76e90bfc9a073702c0fecd303 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 10:50:46 +0300
Subject: [PATCH 1/7] feat(slider): add pure value/position math helpers

---
 src/shared/ui/Slider/slider-math.test.ts | 55 ++++++++++++++++++++++
 src/shared/ui/Slider/slider-math.ts      | 59 ++++++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 src/shared/ui/Slider/slider-math.test.ts
 create mode 100644 src/shared/ui/Slider/slider-math.ts

diff --git a/src/shared/ui/Slider/slider-math.test.ts b/src/shared/ui/Slider/slider-math.test.ts
new file mode 100644
index 0000000..3e7da60
--- /dev/null
+++ b/src/shared/ui/Slider/slider-math.test.ts
@@ -0,0 +1,55 @@
+import {
+    pointerToValue,
+    snapToStep,
+} from './slider-math';
+
+describe('snapToStep', () => {
+    it('snaps a raw value to the nearest step on the grid', () => {
+        expect(snapToStep(53, { min: 0, max: 100, step: 10 })).toBe(50);
+        expect(snapToStep(56, { min: 0, max: 100, step: 10 })).toBe(60);
+    });
+
+    it('clamps below min and above max', () => {
+        expect(snapToStep(-20, { min: 0, max: 100, step: 1 })).toBe(0);
+        expect(snapToStep(200, { min: 0, max: 100, step: 1 })).toBe(100);
+    });
+
+    it('respects a non-zero min when snapping', () => {
+        expect(snapToStep(13, { min: 10, max: 90, step: 5 })).toBe(15);
+    });
+
+    it('preserves fractional step precision', () => {
+        expect(snapToStep(1.34, { min: 0, max: 2, step: 0.05 })).toBe(1.35);
+        expect(snapToStep(0.31, { min: 0, max: 1, step: 0.1 })).toBe(0.3);
+    });
+});
+
+describe('pointerToValue', () => {
+    const rect = { left: 100, right: 300, top: 50, bottom: 250, width: 200, height: 200 } as DOMRect;
+
+    it('maps horizontal pointer position left→min, right→max', () => {
+        const opts = { min: 0, max: 100, step: 1, orientation: 'horizontal' as const };
+        expect(pointerToValue({ clientX: 100, clientY: 0 }, rect, opts)).toBe(0);
+        expect(pointerToValue({ clientX: 200, clientY: 0 }, rect, opts)).toBe(50);
+        expect(pointerToValue({ clientX: 300, clientY: 0 }, rect, opts)).toBe(100);
+    });
+
+    it('inverts vertical: bottom→min, top→max', () => {
+        const opts = { min: 0, max: 100, step: 1, orientation: 'vertical' as const };
+        expect(pointerToValue({ clientX: 0, clientY: 250 }, rect, opts)).toBe(0);
+        expect(pointerToValue({ clientX: 0, clientY: 150 }, rect, opts)).toBe(50);
+        expect(pointerToValue({ clientX: 0, clientY: 50 }, rect, opts)).toBe(100);
+    });
+
+    it('clamps when pointer is outside the track', () => {
+        const opts = { min: 0, max: 100, step: 1, orientation: 'horizontal' as const };
+        expect(pointerToValue({ clientX: 0, clientY: 0 }, rect, opts)).toBe(0);
+        expect(pointerToValue({ clientX: 9999, clientY: 0 }, rect, opts)).toBe(100);
+    });
+
+    it('returns min for a zero-size track without NaN', () => {
+        const zero = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 } as DOMRect;
+        const opts = { min: 5, max: 95, step: 1, orientation: 'horizontal' as const };
+        expect(pointerToValue({ clientX: 0, clientY: 0 }, zero, opts)).toBe(5);
+    });
+});
diff --git a/src/shared/ui/Slider/slider-math.ts b/src/shared/ui/Slider/slider-math.ts
new file mode 100644
index 0000000..43b8a08
--- /dev/null
+++ b/src/shared/ui/Slider/slider-math.ts
@@ -0,0 +1,59 @@
+import {
+    clampNumber,
+    roundToStepPrecision,
+} from '$shared/lib/utils';
+
+/**
+ * Geometry/range options shared by the math helpers.
+ */
+type SliderMathOpts = {
+    /**
+     * Minimum value (inclusive)
+     */
+    min: number;
+    /**
+     * Maximum value (inclusive)
+     */
+    max: number;
+    /**
+     * Step increment
+     */
+    step: number;
+};
+
+/**
+ * Snap a raw value onto the step grid, then clamp to [min, max].
+ *
+ * Snapping is anchored to `min` so non-zero ranges land on valid stops.
+ * `roundToStepPrecision` removes IEEE-754 drift from fractional steps.
+ */
+export function snapToStep(raw: number, { min, max, step }: SliderMathOpts): number {
+    if (step <= 0) {
+        return clampNumber(raw, min, max);
+    }
+    const snapped = min + Math.round((raw - min) / step) * step;
+    return clampNumber(roundToStepPrecision(snapped, step), min, max);
+}
+
+/**
+ * Convert a pointer coordinate into a slider value.
+ *
+ * Horizontal maps left→min, right→max. Vertical is inverted so that
+ * up→max, matching natural slider expectations. The DOMRect is passed in
+ * to keep this pure and unit-testable without layout.
+ */
+export function pointerToValue(
+    point: { clientX: number; clientY: number },
+    rect: DOMRect,
+    opts: SliderMathOpts & { orientation: 'horizontal' | 'vertical' },
+): number {
+    const { min, max, orientation } = opts;
+    const size = orientation === 'vertical' ? rect.height : rect.width;
+    if (size <= 0) {
+        return snapToStep(min, opts);
+    }
+    const ratio = orientation === 'vertical'
+        ? (rect.bottom - point.clientY) / size
+        : (point.clientX - rect.left) / size;
+    return snapToStep(min + clampNumber(ratio, 0, 1) * (max - min), opts);
+}

From 9d6220d2ecc55a063dcb4ae0aa86a0cdbbfa11ff Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 10:54:54 +0300
Subject: [PATCH 2/7] feat(slider): reimplement natively without bits-ui

---
 src/shared/ui/Slider/Slider.svelte | 237 +++++++++++++++++++++--------
 1 file changed, 177 insertions(+), 60 deletions(-)

diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 081dd29..068e022 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -1,13 +1,16 @@
 <!--
     Component: Slider
-    Single-value slider using bits-ui Slider primitive.
+    Single-value slider built on a native role="slider" element (no bits-ui).
+    Supports pointer drag, click-to-seek, touch, and full keyboard nav.
     Swiss design: 1px track, diamond thumb (rotate-45), brand accent.
 -->
 <script lang="ts">
 import {
-    type Orientation,
-    Slider,
-} from 'bits-ui';
+    pointerToValue,
+    snapToStep,
+} from './slider-math';
+
+type Orientation = 'horizontal' | 'vertical';
 
 interface Props {
     /**
@@ -67,8 +70,106 @@ let {
     class: className,
 }: Props = $props();
 
+/**
+ * PageUp/PageDown move by this multiple of `step`.
+ */
+const LARGE_STEP_MULTIPLIER = 10;
+
 const isVertical = $derived(orientation === 'vertical');
 
+/**
+ * Thumb/range offset as a clamped percentage of the track.
+ */
+const percent = $derived.by(() => {
+    if (max <= min) {
+        return 0;
+    }
+    return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+});
+
+let trackEl: HTMLElement | undefined;
+let dragging = $state(false);
+
+/**
+ * Apply a candidate value: snap, clamp, store, and notify only on change.
+ */
+function commit(raw: number): void {
+    const next = snapToStep(raw, { min, max, step });
+    if (next !== value) {
+        value = next;
+        onValueChange?.(next);
+    }
+}
+
+/**
+ * Resolve a pointer event to a value using the live track rect.
+ */
+function seek(event: PointerEvent): void {
+    if (!trackEl) {
+        return;
+    }
+    const rect = trackEl.getBoundingClientRect();
+    commit(pointerToValue(event, rect, { min, max, step, orientation }));
+}
+
+function handlePointerDown(event: PointerEvent): void {
+    if (disabled) {
+        return;
+    }
+    dragging = true;
+    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+    seek(event);
+}
+
+function handlePointerMove(event: PointerEvent): void {
+    if (!dragging || disabled) {
+        return;
+    }
+    seek(event);
+}
+
+function handlePointerUp(event: PointerEvent): void {
+    if (!dragging) {
+        return;
+    }
+    dragging = false;
+    (event.currentTarget as HTMLElement).releasePointerCapture?.(event.pointerId);
+}
+
+function handleKeyDown(event: KeyboardEvent): void {
+    if (disabled) {
+        return;
+    }
+    const large = step * LARGE_STEP_MULTIPLIER;
+    let next: number | undefined;
+    switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            next = value + step;
+            break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            next = value - step;
+            break;
+        case 'PageUp':
+            next = value + large;
+            break;
+        case 'PageDown':
+            next = value - large;
+            break;
+        case 'Home':
+            next = min;
+            break;
+        case 'End':
+            next = max;
+            break;
+        default:
+            return;
+    }
+    event.preventDefault();
+    commit(next);
+}
+
 const labelClasses = `font-mono text-2xs tabular-nums shrink-0
     text-subtle
     group-hover:text-neutral-700 dark:group-hover:text-neutral-300
@@ -91,81 +192,97 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
             {format(value)}
         </span>
 
-        <Slider.Root
-            type="single"
-            orientation="vertical"
-            bind:value
-            {min}
-            {max}
-            {step}
-            {disabled}
-            onValueChange={(v => onValueChange?.(v))}
+        <div
+            bind:this={trackEl}
+            role="presentation"
+            onpointerdown={handlePointerDown}
+            onpointermove={handlePointerMove}
+            onpointerup={handlePointerUp}
+            onpointercancel={handlePointerUp}
             class="
                 relative flex flex-col items-center select-none touch-none
                 w-5 h-full grow cursor-row-resize
                 disabled:opacity-50 disabled:cursor-not-allowed
             "
+            class:opacity-50={disabled}
+            class:cursor-not-allowed={disabled}
         >
-            {#snippet children({ thumbItems })}
+            <span
+                class="
+                    bg-neutral-200 dark:bg-neutral-800
+                    relative grow w-px overflow-visible
+                    group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
+                    transition-colors
+                "
+            >
                 <span
-                    class="
-                        bg-neutral-200 dark:bg-neutral-800
-                        relative grow w-px overflow-visible
-                        group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
-                        transition-colors
-                    "
-                >
-                    <Slider.Range class="absolute bg-brand w-full" />
-                </span>
+                    class="absolute bottom-0 left-0 bg-brand w-full"
+                    style="height: {percent}%"
+                ></span>
+            </span>
 
-                {#each thumbItems as thumb (thumb)}
-                    <Slider.Thumb
-                        index={thumb.index}
-                        class={thumbClasses}
-                        aria-label="Value"
-                    />
-                {/each}
-            {/snippet}
-        </Slider.Root>
+            <span
+                role="slider"
+                tabindex={disabled ? -1 : 0}
+                aria-label="Value"
+                aria-orientation="vertical"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={value}
+                aria-disabled={disabled ? 'true' : undefined}
+                data-active={dragging ? '' : undefined}
+                onkeydown={handleKeyDown}
+                class="{thumbClasses} absolute left-1/2 -translate-x-1/2 translate-y-1/2"
+                style="bottom: {percent}%"
+            ></span>
+        </div>
     </div>
 {:else}
     <div class="flex items-center gap-4 group w-full {className ?? ''}">
-        <Slider.Root
-            type="single"
-            orientation="horizontal"
-            bind:value
-            {min}
-            {max}
-            {step}
-            {disabled}
-            onValueChange={(v => onValueChange?.(v))}
+        <div
+            bind:this={trackEl}
+            role="presentation"
+            onpointerdown={handlePointerDown}
+            onpointermove={handlePointerMove}
+            onpointerup={handlePointerUp}
+            onpointercancel={handlePointerUp}
             class="
                 relative flex items-center select-none touch-none
                 w-full h-5 cursor-col-resize
                 disabled:opacity-50 disabled:cursor-not-allowed
             "
+            class:opacity-50={disabled}
+            class:cursor-not-allowed={disabled}
         >
-            {#snippet children({ thumbItems })}
+            <span
+                class="
+                    bg-neutral-200 dark:bg-neutral-800
+                    relative grow h-px overflow-visible
+                    group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
+                    transition-colors
+                "
+            >
                 <span
-                    class="
-                        bg-neutral-200 dark:bg-neutral-800
-                        relative grow h-px overflow-visible
-                        group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
-                        transition-colors
-                    "
-                >
-                    <Slider.Range class="absolute bg-brand h-full" />
-                </span>
+                    class="absolute top-0 left-0 bg-brand h-full"
+                    style="width: {percent}%"
+                ></span>
+            </span>
 
-                {#each thumbItems as thumb (thumb)}
-                    <Slider.Thumb
-                        index={thumb.index}
-                        class={thumbClasses}
-                        aria-label="Value"
-                    />
-                {/each}
-            {/snippet}
-        </Slider.Root>
+            <span
+                role="slider"
+                tabindex={disabled ? -1 : 0}
+                aria-label="Value"
+                aria-orientation="horizontal"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={value}
+                aria-disabled={disabled ? 'true' : undefined}
+                data-active={dragging ? '' : undefined}
+                onkeydown={handleKeyDown}
+                class="{thumbClasses} absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
+                style="left: {percent}%"
+            ></span>
+        </div>
 
         <!-- Label: right of slider -->
         <span class="{labelClasses} w-12 text-right">

From d7decd7a009fd0d395244dbbce68e770ad78da38 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 11:01:08 +0300
Subject: [PATCH 3/7] fix(slider): normalize value, reactive trackEl,
 aria-valuetext

---
 src/shared/ui/Slider/Slider.svelte | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 068e022..4cf79fd 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -87,7 +87,7 @@ const percent = $derived.by(() => {
     return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
 });
 
-let trackEl: HTMLElement | undefined;
+let trackEl: HTMLElement | undefined = $state();
 let dragging = $state(false);
 
 /**
@@ -101,6 +101,20 @@ function commit(raw: number): void {
     }
 }
 
+/**
+ * Keep an externally-supplied value normalized to the step grid and range.
+ * Mirrors the bits-ui primitive's behavior so out-of-range or off-grid
+ * props don't desync the thumb position from aria-valuenow / the label.
+ * Converges in one pass: once snapped, the value equals its own snap.
+ */
+$effect(() => {
+    const normalized = snapToStep(value, { min, max, step });
+    if (normalized !== value) {
+        value = normalized;
+        onValueChange?.(normalized);
+    }
+});
+
 /**
  * Resolve a pointer event to a value using the live track rect.
  */
@@ -229,6 +243,7 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
                 aria-valuemin={min}
                 aria-valuemax={max}
                 aria-valuenow={value}
+                aria-valuetext={String(format(value))}
                 aria-disabled={disabled ? 'true' : undefined}
                 data-active={dragging ? '' : undefined}
                 onkeydown={handleKeyDown}
@@ -276,6 +291,7 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
                 aria-valuemin={min}
                 aria-valuemax={max}
                 aria-valuenow={value}
+                aria-valuetext={String(format(value))}
                 aria-disabled={disabled ? 'true' : undefined}
                 data-active={dragging ? '' : undefined}
                 onkeydown={handleKeyDown}

From 1209358d40addd64f181eb337a13ead7c5bc377e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 11:02:52 +0300
Subject: [PATCH 4/7] test(slider): cover keyboard and pointer interaction

---
 src/shared/ui/Slider/Slider.svelte.test.ts | 110 +++++++++++++++++++++
 1 file changed, 110 insertions(+)

diff --git a/src/shared/ui/Slider/Slider.svelte.test.ts b/src/shared/ui/Slider/Slider.svelte.test.ts
index bb0aff9..6901c2d 100644
--- a/src/shared/ui/Slider/Slider.svelte.test.ts
+++ b/src/shared/ui/Slider/Slider.svelte.test.ts
@@ -1,9 +1,31 @@
 import {
+    fireEvent,
     render,
     screen,
 } from '@testing-library/svelte';
+import {
+    beforeAll,
+    vi,
+} from 'vitest';
 import Slider from './Slider.svelte';
 
+// jsdom lacks PointerEvent; back it with MouseEvent so clientX/clientY survive.
+beforeAll(() => {
+    if (typeof PointerEvent === 'undefined') {
+        class PointerEventPolyfill extends MouseEvent {
+            pointerId: number;
+            constructor(type: string, params: PointerEventInit = {}) {
+                super(type, params);
+                this.pointerId = params.pointerId ?? 1;
+            }
+        }
+        // @ts-expect-error assigning polyfill to global
+        global.PointerEvent = PointerEventPolyfill;
+    }
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+    HTMLElement.prototype.releasePointerCapture = vi.fn();
+});
+
 describe('Slider', () => {
     describe('Rendering', () => {
         it('renders a slider element', () => {
@@ -60,3 +82,91 @@ describe('Slider', () => {
         });
     });
 });
+
+describe('Keyboard', () => {
+    it('increments by step on ArrowRight / ArrowUp', async () => {
+        const onValueChange = vi.fn();
+        render(Slider, { value: 50, step: 5, onValueChange });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'ArrowRight' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '55');
+        expect(onValueChange).toHaveBeenCalledWith(55);
+    });
+
+    it('decrements by step on ArrowLeft / ArrowDown', async () => {
+        render(Slider, { value: 50, step: 5 });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'ArrowDown' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '45');
+    });
+
+    it('jumps to min on Home and max on End', async () => {
+        render(Slider, { value: 50, min: 10, max: 90 });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'Home' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '10');
+        await fireEvent.keyDown(thumb, { key: 'End' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '90');
+    });
+
+    it('moves by step*10 on PageUp / PageDown', async () => {
+        render(Slider, { value: 50, step: 2 });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'PageUp' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '70');
+        await fireEvent.keyDown(thumb, { key: 'PageDown' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '50');
+    });
+
+    it('clamps at the bounds', async () => {
+        render(Slider, { value: 98, max: 100, step: 5 });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'End' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '100');
+    });
+
+    it('does nothing when disabled', async () => {
+        const onValueChange = vi.fn();
+        render(Slider, { value: 50, disabled: true, onValueChange });
+        const thumb = screen.getByRole('slider');
+        await fireEvent.keyDown(thumb, { key: 'ArrowRight' });
+        expect(thumb).toHaveAttribute('aria-valuenow', '50');
+        expect(onValueChange).not.toHaveBeenCalled();
+    });
+});
+
+describe('Pointer', () => {
+    /**
+     * Force a deterministic track rect since jsdom has no layout.
+     */
+    function mockTrackRect(container: HTMLElement) {
+        const track = container.querySelector('[role="presentation"]') as HTMLElement;
+        track.getBoundingClientRect = () =>
+            ({ left: 0, right: 200, top: 0, bottom: 20, width: 200, height: 20 }) as DOMRect;
+        return track;
+    }
+
+    it('seeks to the clicked position (click-to-seek)', async () => {
+        const onValueChange = vi.fn();
+        const { container } = render(Slider, { value: 0, min: 0, max: 100, onValueChange });
+        const track = mockTrackRect(container);
+        await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '50');
+        expect(onValueChange).toHaveBeenCalledWith(50);
+    });
+
+    it('updates while dragging after pointerdown', async () => {
+        const { container } = render(Slider, { value: 0, min: 0, max: 100 });
+        const track = mockTrackRect(container);
+        await fireEvent.pointerDown(track, { clientX: 50, clientY: 10, pointerId: 1 });
+        await fireEvent.pointerMove(track, { clientX: 150, clientY: 10, pointerId: 1 });
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '75');
+    });
+
+    it('ignores pointer when disabled', async () => {
+        const { container } = render(Slider, { value: 0, disabled: true });
+        const track = mockTrackRect(container);
+        await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
+    });
+});

From 19d9b07c5583ab1d8328ab9728845535727f87ca Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 11:08:07 +0300
Subject: [PATCH 5/7] test(slider): centralize jsdom pointer shims and add
 vertical drag test

---
 src/shared/ui/Slider/Slider.svelte.test.ts | 30 +++++++---------------
 vitest.setup.jsdom.ts                      | 17 ++++++++++++
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/shared/ui/Slider/Slider.svelte.test.ts b/src/shared/ui/Slider/Slider.svelte.test.ts
index 6901c2d..d072e31 100644
--- a/src/shared/ui/Slider/Slider.svelte.test.ts
+++ b/src/shared/ui/Slider/Slider.svelte.test.ts
@@ -3,29 +3,8 @@ import {
     render,
     screen,
 } from '@testing-library/svelte';
-import {
-    beforeAll,
-    vi,
-} from 'vitest';
 import Slider from './Slider.svelte';
 
-// jsdom lacks PointerEvent; back it with MouseEvent so clientX/clientY survive.
-beforeAll(() => {
-    if (typeof PointerEvent === 'undefined') {
-        class PointerEventPolyfill extends MouseEvent {
-            pointerId: number;
-            constructor(type: string, params: PointerEventInit = {}) {
-                super(type, params);
-                this.pointerId = params.pointerId ?? 1;
-            }
-        }
-        // @ts-expect-error assigning polyfill to global
-        global.PointerEvent = PointerEventPolyfill;
-    }
-    HTMLElement.prototype.setPointerCapture = vi.fn();
-    HTMLElement.prototype.releasePointerCapture = vi.fn();
-});
-
 describe('Slider', () => {
     describe('Rendering', () => {
         it('renders a slider element', () => {
@@ -169,4 +148,13 @@ describe('Pointer', () => {
         await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
         expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
     });
+
+    it('maps a vertical drag with the inverted axis (bottom→min, top→max)', async () => {
+        const { container } = render(Slider, { value: 0, min: 0, max: 100, orientation: 'vertical' });
+        const track = container.querySelector('[role="presentation"]') as HTMLElement;
+        track.getBoundingClientRect = () =>
+            ({ left: 0, right: 20, top: 0, bottom: 200, width: 20, height: 200 }) as DOMRect;
+        await fireEvent.pointerDown(track, { clientX: 10, clientY: 50, pointerId: 1 });
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '75');
+    });
 });
diff --git a/vitest.setup.jsdom.ts b/vitest.setup.jsdom.ts
index 0aa5e51..228df6a 100644
--- a/vitest.setup.jsdom.ts
+++ b/vitest.setup.jsdom.ts
@@ -44,3 +44,20 @@ Object.defineProperty(window, 'localStorage', {
     value: localStorageMock,
     writable: true,
 });
+
+// jsdom lacks PointerEvent; back it with MouseEvent so clientX/clientY survive.
+if (typeof PointerEvent === 'undefined') {
+    class PointerEventPolyfill extends MouseEvent {
+        pointerId: number;
+        constructor(type: string, params: PointerEventInit = {}) {
+            super(type, params);
+            this.pointerId = params.pointerId ?? 1;
+        }
+    }
+    // @ts-expect-error assigning polyfill to the global scope
+    global.PointerEvent = PointerEventPolyfill;
+}
+
+// jsdom lacks pointer capture
+HTMLElement.prototype.setPointerCapture = vi.fn();
+HTMLElement.prototype.releasePointerCapture = vi.fn();

From 3f5151efa02917a37f1c40408719ad0ecc1254d9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 11:08:58 +0300
Subject: [PATCH 6/7] docs(slider): update story copy for native implementation

---
 src/shared/ui/Slider/Slider.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/Slider/Slider.stories.svelte b/src/shared/ui/Slider/Slider.stories.svelte
index 2ccc455..1ad2fdf 100644
--- a/src/shared/ui/Slider/Slider.stories.svelte
+++ b/src/shared/ui/Slider/Slider.stories.svelte
@@ -10,7 +10,7 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Styled bits-ui slider component with red accent (#ff3b30). Thumb is a 45° rotated square with hover/active scale animations.',
+                    'Single-value slider (native, no bits-ui) with brand accent. Diamond thumb (45° rotated square) with hover/active scale. Supports pointer drag, click-to-seek, touch, and keyboard (arrows, Home/End, PageUp/Down).',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },

From ae2d0e3c2feccbd58261f01872e9bde704425646 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 11:14:10 +0300
Subject: [PATCH 7/7] fix(slider): focus thumb on pointerdown for keyboard
 parity

---
 src/shared/ui/Slider/Slider.stories.svelte | 2 --
 src/shared/ui/Slider/Slider.svelte         | 4 ++++
 src/shared/ui/Slider/Slider.svelte.test.ts | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/Slider/Slider.stories.svelte b/src/shared/ui/Slider/Slider.stories.svelte
index 1ad2fdf..80c1fb0 100644
--- a/src/shared/ui/Slider/Slider.stories.svelte
+++ b/src/shared/ui/Slider/Slider.stories.svelte
@@ -39,8 +39,6 @@ const { Story } = defineMeta({
 <script lang="ts">
 import type { ComponentProps } from 'svelte';
 let value = $state(50);
-let valueLow = $state(25);
-let valueHigh = $state(75);
 </script>
 
 <Story
diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 4cf79fd..d866731 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -88,6 +88,7 @@ const percent = $derived.by(() => {
 });
 
 let trackEl: HTMLElement | undefined = $state();
+let thumbEl: HTMLElement | undefined = $state();
 let dragging = $state(false);
 
 /**
@@ -131,6 +132,7 @@ function handlePointerDown(event: PointerEvent): void {
         return;
     }
     dragging = true;
+    thumbEl?.focus();
     (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
     seek(event);
 }
@@ -237,6 +239,7 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
 
             <span
                 role="slider"
+                bind:this={thumbEl}
                 tabindex={disabled ? -1 : 0}
                 aria-label="Value"
                 aria-orientation="vertical"
@@ -285,6 +288,7 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
 
             <span
                 role="slider"
+                bind:this={thumbEl}
                 tabindex={disabled ? -1 : 0}
                 aria-label="Value"
                 aria-orientation="horizontal"
diff --git a/src/shared/ui/Slider/Slider.svelte.test.ts b/src/shared/ui/Slider/Slider.svelte.test.ts
index d072e31..5d63c34 100644
--- a/src/shared/ui/Slider/Slider.svelte.test.ts
+++ b/src/shared/ui/Slider/Slider.svelte.test.ts
@@ -149,6 +149,15 @@ describe('Pointer', () => {
         expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
     });
 
+    it('focuses the thumb on pointerdown so arrow keys work immediately', async () => {
+        const { container } = render(Slider, { value: 0, min: 0, max: 100 });
+        const track = container.querySelector('[role="presentation"]') as HTMLElement;
+        track.getBoundingClientRect = () =>
+            ({ left: 0, right: 200, top: 0, bottom: 20, width: 200, height: 20 }) as DOMRect;
+        await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 });
+        expect(screen.getByRole('slider')).toBe(document.activeElement);
+    });
+
     it('maps a vertical drag with the inverted axis (bottom→min, top→max)', async () => {
         const { container } = render(Slider, { value: 0, min: 0, max: 100, orientation: 'vertical' });
         const track = container.querySelector('[role="presentation"]') as HTMLElement;