import React from 'react';
import {storiesOf} from '@storybook/react';
import {number} from '@storybook/addon-knobs';
import {action} from '@storybook/addon-actions';
import Slider from '../../Components/Slider';

const marks = [
  {
    dot: 0,
    label: 0,
    markStyles: {
      position: 'relative',
      top: '-6px',
    },
  },
  {
    dot: 100,
    label: 100,
    markStyles: {
      position: 'relative',
      top: '-6px',
    },
  },
];

export default storiesOf('Components | Slider', module)
  .add('default', () => (
    <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);
      }}
    />
  ));