import { Canvas, Meta, Controls, Source } from '@storybook/addon-docs';
import * as SliderStories from './Slider.stories';

# Slider

<Meta of={SliderStories} />

<br />

## Overview

입력 가능한 값을 확인하고, 버튼을 밀고 당기며 값을 조절하는 기능입니다.

<Canvas of={SliderStories.Default} />

<Controls />

<br />

## API Reference

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>defaultValue</td>
      <td>number[]</td>
      <td>defaultValue를 나타냅니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>orientation</td>
      <td>"horizontal" | "vertical" | undefined</td>
      <td>요소의 방향입니다.</td>
      <td>"horizontal"</td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>number[]</td>
      <td>슬라이더의 제한된 값을 나타냅니다. v-model로 바인딩 할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>이름을 나타냅니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>인터렉션을 조작할 여부를 나타냅니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>inverted</td>
      <td>boolean</td>
      <td>슬라이더의 반전 여부를 나타냅니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>min</td>
      <td>number</td>
      <td>범위의 최소값을 나타냅니다.</td>
      <td>0</td>
    </tr>
    <tr>
      <td>max</td>
      <td>number</td>
      <td>범위의 최대값을 나타냅니다.</td>
      <td>100</td>
    </tr>
    <tr>
      <td>step</td>
      <td>number</td>
      <td>stepping 간격을 나타냅니다.</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

## Usage

기본적인 <strong>Slider</strong> 컴포넌트 사용방법 입니다.

<Source  
code={`
import { Slider } from '@lotte-innovate/lui';

<Slider defaultValue={[50]} />; `} />

<br />

## Variant

### Radius

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={SliderStories.Radius} />
### Size

`size` props는 컴포넌트의 크기입니다.

기본 값은 `medium` 입니다.

<Canvas of={SliderStories.Size} />