visuals, fixes & storybook upd

src/stories/Slider.stories.tsx

@@ -8,16 +8,67 @@ const meta = {
     docs: {
       description: {
         component:
-          'Radix Slider in the carved-track skin. All Radix Slider props pass through (`defaultValue`, `min`, `max`, `step`, `onValueChange`).',
+          '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 = { args: { defaultValue: [60], max: 100, step: 1 } };
+export const Playground: Story = {};
 
-export const Stepped: Story = { args: { defaultValue: [40], max: 100, step: 10 } };
+/** `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 },
+};