import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as SliderStories from './slider.stories';

<Meta of={SliderStories} />

# Slider

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/slider)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/slider/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/slider/accessibility)

## Table of Contents

- [Overview](#overview)
- [Controlled Slider](#controlled-slider)
- [Skeleton](#skeleton)
- [Slider With Customer](#slider-with-customer)
- [Slider With Hidden Inputs](#slider-with-customer)
- [Two Handle Skeleton](#two-handle-skeleton)
- [Two Handle Slider](#two-handle-slider)
- [Two Handle Slider With Hidden Inputs](#two-handle-slider-with-hidden-inputs)
- [Component API](#component-api)
- [Feedback](#feedback)

## Overview

Sliders provide a visual indication of adjustable content, where the user can
increase or decrease the value by moving the handle along a horizontal track.

<Canvas of={SliderStories.Default} />

## Controlled Slider

<Canvas of={SliderStories.ControlledSlider} />

## Skeleton

<Canvas of={SliderStories.Skeleton} />

## Component API

## `cds-slider`

<ArgTypes of="cds-slider" />

## `cds-slider-input`

<ArgTypes of="cds-slider-input" />

<Markdown>{`${cdnJs({ components: ['slider'] })}`}</Markdown>

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/slider/slider.mdx).
