52 lines
1.5 KiB
Svelte
52 lines
1.5 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 for selecting a value within a range.',
|
||
|
|
},
|
||
|
|
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 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>
|
||
|
|
|
||
|
|
<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>
|