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

feat: storybook cases and mocks

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-19 13:58:12 +03:00
parent 9d1f59d819
commit da79dd2e35
22 changed files with 3047 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,21 +31,26 @@ 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 minValue = 0;
let maxValue = 100;
let stepValue = 1;
let value = $state(50);
</script>
<Story name="Horizontal" args={{ orientation: 'horizontal', min: minValue, max: maxValue, step: stepValue, value }}>
<Slider bind:value min={minValue} max={maxValue} step={stepValue} />
<Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
<Slider bind:value />
</Story>
<Story name="Vertical" args={{ orientation: 'vertical', min: minValue, max: maxValue, step: stepValue, value }}>
<Slider bind:value min={minValue} max={maxValue} step={stepValue} orientation="vertical" />
<Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
<Slider bind:value />
</Story>
<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
<Slider bind:value />
</Story>