From 2ee49b7cbd2c50171204e875bc47470cb13601bd Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 17:57:40 +0300
Subject: [PATCH] feat(Slider): component redesign with complete storybook
 coverage

---
 src/shared/ui/Slider/Slider.stories.svelte |  97 +++++++-
 src/shared/ui/Slider/Slider.svelte         | 243 +++++++++++----------
 2 files changed, 212 insertions(+), 128 deletions(-)

diff --git a/src/shared/ui/Slider/Slider.stories.svelte b/src/shared/ui/Slider/Slider.stories.svelte
index 062fa7f..c0fa835 100644
--- a/src/shared/ui/Slider/Slider.stories.svelte
+++ b/src/shared/ui/Slider/Slider.stories.svelte
@@ -9,7 +9,8 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component: 'Styled bits-ui slider component for selecting a value within a range.',
+                component:
+                    'Styled bits-ui slider component with red accent (#ff3b30). Thumb is a 45° rotated square with hover/active scale animations.',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
@@ -31,32 +32,110 @@ const { Story } = defineMeta({
             control: 'number',
             description: 'Step size for value increments',
         },
-        label: {
-            control: 'text',
-            description: 'Optional label displayed inline on the track',
-        },
     },
 });
 </script>
 
 <script lang="ts">
 let value = $state(50);
+let valueLow = $state(25);
+let valueHigh = $state(75);
 </script>
 
 <Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
     {#snippet template(args)}
-        <Slider bind:value {...args} />
+        <div class="p-8">
+            <Slider {...args} />
+            <p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
+            <p class="mt-2 text-xs text-muted-foreground">
+                Hover over thumb to see scale effect, click and drag to interact
+            </p>
+        </div>
     {/snippet}
 </Story>
 
 <Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
     {#snippet template(args)}
-        <Slider bind:value {...args} />
+        <div class="p-8 flex items-center gap-8 h-72">
+            <Slider {...args} />
+            <div>
+                <p class="text-sm text-muted-foreground">Value: {args.value}</p>
+                <p class="mt-2 text-xs text-muted-foreground">Vertical orientation with same red accent</p>
+            </div>
+        </div>
     {/snippet}
 </Story>
 
-<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
+<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
     {#snippet template(args)}
-        <Slider bind:value {...args} />
+        <div class="p-8">
+            <Slider {...args} />
+            <p class="mt-4 text-sm text-muted-foreground">Slider with inline label</p>
+        </div>
+    {/snippet}
+</Story>
+
+<Story
+    name="Dark Mode"
+    args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}
+    parameters={{
+        backgrounds: {
+            default: 'dark',
+        },
+    }}
+>
+    {#snippet template(args)}
+        <div class="p-8 bg-background">
+            <Slider {...args} />
+            <p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
+            <p class="mt-2 text-xs text-muted-foreground">Dark mode: track uses neutral-800</p>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Interactive States" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value: 50 }}>
+    {#snippet template(args)}
+        <div class="p-8 space-y-8">
+            <div>
+                <p class="text-sm font-medium mb-2">Thumb: 45° rotated square</p>
+                <Slider {...args} value={50} />
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Hover State (scale-125)</p>
+                <Slider {...args} value={50} />
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Different Values</p>
+                <div class="space-y-4">
+                    <Slider {...args} value={10} />
+                    <Slider {...args} value={50} />
+                    <Slider {...args} value={90} />
+                </div>
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Focus State (ring-2 ring-[#ff3b30]/20)</p>
+                <p class="text-xs text-muted-foreground">Tab to the thumb to see focus ring</p>
+                <Slider {...args} value={50} class="mt-2" />
+            </div>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Step Sizes" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
+    {#snippet template(args)}
+        <div class="p-8 space-y-6">
+            <div>
+                <p class="text-sm font-medium mb-2">Step: 1 (default)</p>
+                <Slider {...args} value={50} step={1} />
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Step: 10</p>
+                <Slider {...args} value={50} step={10} />
+            </div>
+            <div>
+                <p class="text-sm font-medium mb-2">Step: 25</p>
+                <Slider {...args} value={50} step={25} />
+            </div>
+        </div>
     {/snippet}
 </Story>
diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 20e68bb..c0d02b5 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -1,137 +1,142 @@
 <!--
     Component: Slider
-    Styled bits-ui slider component with single value.
+    Single-value slider using bits-ui Slider primitive.
+    Swiss design: 1px track, diamond thumb (rotate-45), brand accent.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    Slider,
-    type SliderRootProps,
-} from 'bits-ui';
+import { Slider } from 'bits-ui';
 
-type Props =
-    & Omit<
-        SliderRootProps,
-        'type' | 'onValueChange' | 'onValueCommit'
-    >
-    & {
-        /**
-         * Slider value, numeric.
-         */
-        value: number;
-        /**
-         * Optional label displayed inline on the track before the filled range.
-         */
-        label?: string;
-        /**
-         * A callback function called when the value changes.
-         * @param newValue - number
-         */
-        onValueChange?: (newValue: number) => void;
-        /**
-         * A callback function called when the user stops dragging the thumb and the value is committed.
-         * @param newValue - number
-         */
-        onValueCommit?: (newValue: number) => void;
-    };
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Format the displayed value label.
+     * @default (v) => v
+     */
+    format?: (v: number) => string | number;
+    onValueChange?: (v: number) => void;
+    class?: string;
+}
 
 let {
-    value = $bindable(),
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
     orientation = 'horizontal',
+    format = (v: number) => v,
+    onValueChange,
     class: className,
-    label,
-    ...rest
 }: Props = $props();
+
+const isVertical = $derived(orientation === 'vertical');
+
+const labelClasses = `font-['Space_Mono'] text-[0.625rem] tabular-nums shrink-0
+    text-neutral-500 dark:text-neutral-400
+    group-hover:text-neutral-700 dark:group-hover:text-neutral-300
+    transition-colors`;
+
+const thumbClasses = `block w-2.5 h-2.5 bg-brand
+    rotate-45 shadow-sm
+    hover:scale-125
+    focus-visible:outline-none
+    focus-visible:ring-2 focus-visible:ring-brand/20
+    data-active:scale-90
+    transition-transform duration-150
+    disabled:pointer-events-none disabled:opacity-50
+    cursor-grab active:cursor-grabbing`;
 </script>
 
-<Slider.Root
-    bind:value
-    class={cn(
-        'relative flex h-full w-6 touch-none select-none items-center justify-center',
-        orientation === 'horizontal' ? 'w-48 h-6' : 'w-6 h-48',
-        className,
-    )}
-    type="single"
-    {orientation}
-    {...rest}
->
-    {#snippet children(props)}
-        {#if label && orientation === 'horizontal'}
-            <span class="absolute top-0 left-0 -translate-y-1/2 text-[0.5rem] uppercase text-gray-400">
-                {label}
-            </span>
-        {/if}
-        <span
-            {...props}
-            class={cn(
-                'relative bg-background-muted rounded-full',
-                orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px',
-            )}
-        >
-            <Slider.Range
-                class={cn(
-                    'absolute bg-foreground rounded-full',
-                    orientation === 'horizontal' ? 'h-full' : 'w-full',
-                )}
-            />
+{#if isVertical}
+    <div class="inline-flex flex-col items-center gap-3 group h-full {className ?? ''}">
+        <span class="{labelClasses} text-center">
+            {format(value)}
+        </span>
 
-            <Slider.Thumb
-                index={0}
-                class={cn(
-                    'group/thumb relative block',
-                    'size-2',
-                    orientation === 'horizontal' ? '-top-1' : '-left-1',
-                    'rounded-full',
-                    'bg-foreground',
-                    // Glow shadow
-                    'shadow-[0_0_6px_rgba(0,0,0,0.4)]',
-                    // Smooth transitions only for size/position
-                    'duration-200 ease-out',
-                    orientation === 'horizontal'
-                        ? 'transition-[height,top,left,box-shadow]'
-                        : 'transition-[width,top,left,box-shadow]',
-                    // Hover: bigger glow
-                    'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]',
-                    orientation === 'horizontal'
-                        ? 'hover:size-3 hover:-top-[5.5px]'
-                        : 'hover:size-3 hover:-left-[5.5px]',
-                    // Active: smaller glow
-                    'active:shadow-[0_0_4px_rgba(0,0,0,0.3)]',
-                    orientation === 'horizontal'
-                        ? 'active:h-2.5 active:-top-[4.5px]'
-                        : 'active:w-2.5 active:-left-[4.5px]',
-                    'focus:outline-none',
-                    'cursor-grab active:cursor-grabbing',
-                )}
-            >
-                <div
+        <Slider.Root
+            type="single"
+            orientation="vertical"
+            bind:value
+            {min}
+            {max}
+            {step}
+            {disabled}
+            onValueChange={(v => onValueChange?.(v))}
+            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
+            "
+        >
+            {#snippet children({ thumbItems })}
+                <span
                     class="
-                        absolute inset-0 rounded-full
-                        bg-background-20
-                        opacity-0 group-hover/thumb:opacity-100
-                        transition-opacity duration-200
+                        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
                     "
                 >
-                </div>
-
-                <span
-                    class={cn(
-                        'absolute',
-                        orientation === 'horizontal'
-                            ? '-top-8 left-1/2 -translate-x-1/2'
-                            : 'left-5 top-1/2 -translate-y-1/2',
-                        'px-1.5 py-0.5 rounded-md',
-                        'bg-foreground/90 backdrop-blur-sm',
-                        'font-mono text-[0.625rem] font-medium text-background',
-                        'opacity-0 group-hover/thumb:opacity-100',
-                        'transition-all duration-300',
-                        'pointer-events-none',
-                        'shadow-sm',
-                    )}
-                >
-                    {value}
+                    <Slider.Range class="absolute bg-brand w-full" />
                 </span>
-            </Slider.Thumb>
+
+                {#each thumbItems as thumb (thumb)}
+                    <Slider.Thumb
+                        index={thumb.index}
+                        class={thumbClasses}
+                        aria-label="Value"
+                    />
+                {/each}
+            {/snippet}
+        </Slider.Root>
+    </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))}
+            class="
+                relative flex items-center select-none touch-none
+                w-full h-5 cursor-col-resize
+                disabled:opacity-50 disabled:cursor-not-allowed
+            "
+        >
+            {#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
+                    "
+                >
+                    <Slider.Range class="absolute bg-brand h-full" />
+                </span>
+
+                {#each thumbItems as thumb (thumb)}
+                    <Slider.Thumb
+                        index={thumb.index}
+                        class={thumbClasses}
+                        aria-label="Value"
+                    />
+                {/each}
+            {/snippet}
+        </Slider.Root>
+
+        <!-- Label: right of slider -->
+        <span class="{labelClasses} w-12 text-right">
+            {format(value)}
         </span>
-    {/snippet}
-</Slider.Root>
+    </div>
+{/if}