124 lines
4.2 KiB
Svelte
124 lines
4.2 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import Slider from './Slider.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/Slider',
|
|
component: Slider,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
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
|
|
},
|
|
},
|
|
argTypes: {
|
|
value: {
|
|
control: 'number',
|
|
description: 'Current value (two-way bindable)',
|
|
},
|
|
min: {
|
|
control: 'number',
|
|
description: 'Minimum value',
|
|
},
|
|
max: {
|
|
control: 'number',
|
|
description: 'Maximum value',
|
|
},
|
|
step: {
|
|
control: 'number',
|
|
description: 'Step size for value increments',
|
|
},
|
|
},
|
|
});
|
|
</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)}
|
|
<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)}
|
|
<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 }}>
|
|
{#snippet template(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="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>
|