75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
|
import { Slider } from '../components/ui';
|
|
|
|
const meta = {
|
|
title: 'Inputs/Slider',
|
|
component: Slider,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Radix Slider in the carved-track skin. All Radix Slider props pass through (`defaultValue`, `min`, `max`, `step`, `onValueChange`). Set `marks` to carve step notches into the track — `marks` snaps to the Radix `step`.',
|
|
},
|
|
},
|
|
},
|
|
args: { defaultValue: [60], min: 0, max: 100, step: 1 },
|
|
argTypes: {
|
|
defaultValue: { control: 'object', description: 'Uncontrolled starting value(s).' },
|
|
min: { control: 'number' },
|
|
max: { control: 'number' },
|
|
step: { control: 'number', description: 'Snap increment (also drives auto `marks`).' },
|
|
disabled: { control: 'boolean' },
|
|
marks: {
|
|
control: 'boolean',
|
|
description: 'Step marks. `true` derives one per `step`; or pass an array for custom/labelled marks.',
|
|
},
|
|
notches: {
|
|
control: 'inline-radio',
|
|
options: ['top', 'bottom', 'both', 'none'],
|
|
description: 'Notch tick placement relative to the track (labels still render when `none`).',
|
|
},
|
|
knobStyle: {
|
|
control: 'inline-radio',
|
|
options: ['square', 'round'],
|
|
description: 'Knob shape: `square` (default) or `round`.',
|
|
},
|
|
className: { control: 'text' },
|
|
},
|
|
decorators: [(Story) => <div style={{ width: 280 }}><Story /></div>],
|
|
} satisfies Meta<typeof Slider>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {};
|
|
|
|
/** `marks` auto-derives one notch per `step`. */
|
|
export const Stepped: Story = {
|
|
args: { defaultValue: [40], step: 10, marks: true },
|
|
};
|
|
|
|
/** `notches='both'` carves ticks above and below the bar. */
|
|
export const NotchesBoth: Story = {
|
|
args: { defaultValue: [60], step: 20, marks: true, notches: 'both' },
|
|
};
|
|
|
|
/** Pass an array of `{ value, label }` for labelled ticks. */
|
|
export const LabelledMarks: Story = {
|
|
args: {
|
|
defaultValue: [50],
|
|
step: 25,
|
|
notches: 'bottom',
|
|
marks: [
|
|
{ value: 0, label: 'Off' },
|
|
{ value: 25, label: 'Low' },
|
|
{ value: 50, label: 'Mid' },
|
|
{ value: 75, label: 'High' },
|
|
{ value: 100, label: 'Max' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: { defaultValue: [30], step: 10, marks: true, disabled: true },
|
|
};
|