useSlider docs

README.md

@@ -74,6 +74,7 @@
   - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.
   - [`useDrop` and `useDropArea`](./docs/useDrop.md) — tracks file, link and copy-paste drops.
   - [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)
+  - [`useSlider`](./docs/useSlider.md) — provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)
   - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
   - [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
   - [`useWait`](./docs/useWait.md) — complex waiting management for UIs.

docs/useSlider.md

@@ -0,0 +1,25 @@
+# `useSlider`
+
+React UI hook that provides slide behavior over any HTML element. Supports both mouse and touch events.
+
+## Usage
+
+```jsx
+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(state.value * 100)}%
+        </p>
+        <div style={{ position: 'absolute', left: pos }}>🎚</div>
+      </div>
+    </div>
+  );
+};
+```

src/__stories__/useSlider.story.tsx

@@ -9,8 +9,11 @@ const Demo = () => {
 
   return (
     <div>
-      <div ref={ref} style={{ position: 'relative', width: '100%', height: 25, background: 'lightgray' }}>
-        <div style={{ position: 'absolute', left: state.value * state.length - 10 }}>🎚</div>
+      <div ref={ref} style={{ position: 'relative', background: 'lightgray', padding: 4 }}>
+        <p style={{ margin: 0, textAlign: 'center', color: state.isSliding ? 'red' : 'green' }}>
+          {Math.round(state.value * 100)}%
+        </p>
+        <div style={{ position: 'absolute', top: 0, left: state.value * state.length - 10 }}>🎚</div>
       </div>
       <pre>{JSON.stringify(state, null, 2)}</pre>
     </div>