glide-design-system/src/stories/slider/Slider.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import Slider from "../../lib/components/slider/Slider";

export default {
  title: "Components/Slider",
  component: Slider,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Slider component allows users to select a value or range by sliding a handle along a track. Commonly used in forms and settings, it supports customization options, including event handling, styling, and color customization.",
      },
    },
  },
  argTypes: {
    onChange: {
      control: "",
      description:
        "Function to call when the slider value changes. It typically receives the new value as an argument.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the slider component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the slider component.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the slider component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the slider component for custom styling.",
    },
    primaryColor: {
      control: "",
      description:
        "Specifies the primary color of the slider track and handle.",
    },
    secondaryColor: {
      control: "",
      description:
        "Specifies the secondary color of the slider track, often used for the range selection.",
    },
    min: {
      control: "",
      description: "The minimum value that the slider can take.",
    },
    max: {
      control: "",
      description: "The maximum value that the slider can take.",
    },
    value: {
      control: "",
      description: "The current value of the slider.",
    },
  },
};

const Template = (args) => {
  return <Slider {...args} />;
};

export const Default = Template.bind({});
Default.args = {};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Slider component.",
    },
  },
};

export const CustomMinAndMax = Template.bind({});
CustomMinAndMax.args = {
  min: 0,
  max: 50,
  value: 0,
};

CustomMinAndMax.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use skeleton with custom min and max value.",
    },
  },
};

export const CustomColor = Template.bind({});
CustomColor.args = {
  min: 0,
  max: 50,
  value: 10,
  primaryColor: "#004d40",
  secondaryColor: "#b2dfdb",
};

CustomColor.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use skeleton with custom primary and secondary color.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  min: 0,
  max: 50,
  value: 10,
  style: {
    border: "1px solid #4db6ac",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use skeleton with custom style.",
    },
  },
};