Skip to content

Latest commit

Β 

History

History
25 lines (20 loc) Β· 599 Bytes

useSlider.md

File metadata and controls

25 lines (20 loc) Β· 599 Bytes

useSlider

React UI hook that provides slide behavior over any HTML element. Supports both mouse and touch events.

Usage

import {useSlider} from 'react-use';

const Demo = () => {
  const ref = React.useRef(null);
  const {isSliding, value, pos, length} = useSlider(ref);

  return (
    <div>
      <div ref={ref} style={{ position: 'relative' }}>
        <p style={{ textAlign: 'center', color: isSliding ? 'red' : 'green' }}>
          {Math.round(value * 100)}%
        </p>
        <div style={{ position: 'absolute', left: pos }}>🎚</div>
      </div>
    </div>
  );
};