glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Slider): component redesign with complete storybook coverage

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-24 17:57:40 +03:00
parent 10437a2bf3
commit 2ee49b7cbd
2 changed files with 212 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/shared/ui/Slider/Slider.stories.svelte
View File

@@ -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>