import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as SliderStories from "./src/slider.stories"; import packageInfo from "./package.json";

Slider

Version {packageInfo.version}

This component can be used to get a range value or a single value.

• Use an array of one number for the defaultValue / value and it will act as single.
• Use an array of two numbers for the defaultValue / value and it will act as range.

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/slider": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

Controlled slider

import { Slider } from "@purpurds/slider";

export const MyComponent = () => {
  const [value, setValue] = useState<[number, number]>([25, 50]);

  return (
    <Slider
      aria-label="thumb-aria-label"
      data-testid="slider"
      value={value}
      onValueChange={setValue}
    />
  );
};

Uncontrolled slider

When rendered in a form, an input reflecting the value of the slider will be rendered.

import { Slider } from "@purpurds/slider";

export const MyComponent = () => {
  return (
    <form>
      <Slider
        aria-label="thumb-aria-label"
        data-testid="slider-2"
        defaultValue={[10]}
        min={0}
        max={20}
        orientation="horizontal"
        name="my-slider"
        step={1}
      />
    </form>
  );
};