DSMMG/storybook/stories/Slider.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { Slider } from "@managemate/react";

const meta = {
  title: "Forms/Slider",
  component: Slider,
  tags: ["autodocs"],
} satisfies Meta<typeof Slider>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Single: Story = {
  render: () => {
    const [v, setV] = useState([62]);
    return (
      <div style={{ width: 320 }}>
        <label style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: "var(--mmg-font-size-sm)", fontWeight: 600 }}>
          <span>Volume</span>
          <span style={{ fontVariantNumeric: "tabular-nums" }}>{v[0]}%</span>
        </label>
        <Slider label="Volume" value={v} onValueChange={setV} />
      </div>
    );
  },
};

export const Range: Story = {
  render: () => {
    const [v, setV] = useState([800, 2400]);
    return (
      <div style={{ width: 320 }}>
        <label style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: "var(--mmg-font-size-sm)", fontWeight: 600 }}>
          <span>Prix</span>
          <span style={{ fontVariantNumeric: "tabular-nums" }}>{v[0]} € — {v[1]} €</span>
        </label>
        <Slider label="Prix" value={v} onValueChange={setV} min={0} max={5000} step={50} />
      </div>
    );
  },
};

export const Disabled: Story = {
  render: () => (
    <div style={{ width: 320 }}>
      <Slider label="x" value={[40]} onValueChange={() => {}} disabled />
    </div>
  ),
};