react-use/stories/useSlider.story.tsx

import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { useSlider } from '../src';
import ShowDocs from './util/ShowDocs';

const Demo = () => {
  const ref = React.useRef(null);
  const state = useSlider(ref);

  return (
    <div>
      <div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4 }}>
        <p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
        <div style={{ position: 'absolute', top: 0, left: (100 * state.value) + '%', transform: 'scale(2)' }}>
          {state.isSliding ? '🏂' : '🎿'}
        </div>
      </div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  );
};

const DemoVertical = () => {
  const ref = React.useRef(null);
  const state = useSlider(ref, { vertical: true });

  return (
    <div>
      <div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4, width: 30, height: 400 }}>
        <p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
        <div style={{ position: 'absolute', left: 0, top: (100 * state.value) + '%', transform: 'scale(2)' }}>
          {state.isSliding ? '🏂' : '🎿'}
        </div>
      </div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  );
};

storiesOf('UI|useSlider', module)
  .add('Docs', () => <ShowDocs md={require('../docs/useSlider.md')} />)
  .add('Horizontal', () => <Demo />)
  .add('Vertical', () => <DemoVertical />);