import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Slider } from "./Slider";
import * as SliderStories from "./Slider.stories";

<Meta of={SliderStories} />

# Slider

Slider allows creating a range slider input, with a `minValue`, `maxValue`, and `step`. It also allows providing an optional `minLabel` and `maxLabel`.

The output of the slider can be formatted by providing a `formatOptions` prop, which is an object as documented in [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#using_options).

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Slider } from "@simplybusiness/mobius";
```

## Examples

### Primary

<Canvas of={SliderStories.Primary} />

### Secondary

<Canvas of={SliderStories.Secondary} />

### Formatted

<Canvas of={SliderStories.Formatted} />

### No label

<Canvas of={SliderStories.NoLabel} />

### Disabled

<Canvas of={SliderStories.Disabled} />

## Props

<ArgTypes of={Slider} />

## Component HTML Structure and Class names

The following HTML is rendered for a Slider:

```html
<div class="mobius-slider --is-primary">
  <div class="mobius-slider__label-wrapper">
    <label class="mobius-label" for=":r1:" id=":r2:"> My Slider Label </label>
    <output>5</output>
  </div>

  <div class="mobius-slider__track-wrapper">
    <input
      id=":r1:"
      class="mobius-slider__track"
      type="range"
      value="5"
      min="1"
      max="10"
      step="1"
      autocomplete="off"
    />
  </div>

  <div class="mobius-slider__labels">
    <div class="mobius-slider__min-label">Min</div>
    <div class="mobius-slider__max-label">Max</div>
  </div>
</div>
```
