monday-ui-react-core/src/components/Slider/__stories__/Slider.mdx

Official monday.com UI resources for application development in React.js

import { Meta } from "@storybook/blocks";
import { UsageGuidelines } from "vibe-storybook-components";
import {
  LINEAR_PROGRESS_BAR,
  MULTI_STEP_INDICATOR,
  TOGGLE
} from "../../../storybook/components/related-components/component-description-map";
import { TipMultiStepIndicator } from "./Slider.stories.helpers";
import * as SliderStories from "./Slider.stories";

<Meta of={SliderStories} />

# Slider

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Slider is a visual input component that reflects current state status in its appearance.

<Canvas of={SliderStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Slider adjustment makes immediate changes to its content without need of saving",
    "Slider works best when the exact value does not matter for the user",
    "Slider works best for adjusting volume, setting playback time within a music player, adjusting brightness.",
    "If exact value is necessary use slider with label"
  ]}
/>

<TipMultiStepIndicator />

## Variants

### Sizes

Sizes small/medium/large are available.

<Canvas of={SliderStories.Sizes} />

### Ranged Slider

Slider can define range instead of single value

<Canvas of={SliderStories.Ranged} />

### Colors

Color Modes primary/positive/negative are available.

<Canvas of={SliderStories.Colors} />

### Disabled

Slider can be disabled.

<Canvas of={SliderStories.Disabled} />

### With labels

Indicate selection at Label, Add Prefix and/or Postfix Icons or Labels

<Canvas of={SliderStories.WithLabels} />

### Always show Slider's value

Always show value of slider (instead of Tooltip).

<Canvas of={SliderStories.ShowValue} />

### Limit and Step

Limit and Step can be customized.

<Canvas of={SliderStories.LimitsSteps} />

### Customisation

Custom ID, custom `data-testid` and Custom Class. Add Custom Items as Prefix and Postfix of Slider.

**Important!** Please use customisation very careful, only if you really need it. Check twice with your Product/Designer.

<Canvas of={SliderStories.Customisation} />

## Related components

<RelatedComponents componentsNames={[LINEAR_PROGRESS_BAR, TOGGLE, MULTI_STEP_INDICATOR]} />