# Slider

![size](https://img.shields.io/bundlephobia/min/@propellerads/slider.svg)
![](https://img.shields.io/npm/v/@propellerads/slider.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/slider) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Slider)

## Installation
* `yarn add @propellerads/slider` or `npm install @propellerads/slider -S`

### How to use
* `import Slider from '@propellerads/slider';`
* And render
```
const marks = [
    {
        dot: 0,
        label: 0,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
    {
        dot: 100,
        label: 100,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
];

    <Slider
        value={number('Value', 0)}
        marks={marks}
        max={number('Max', 100)}
        min={number('Min', 0)}
        step={number('Step', 5)}
        onChange={(value) => {
            alert(value);
            action(value);
        }}
    />
```