From c0843555ef8f8117db5c986692d899ccfaef700a Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Tue, 15 Oct 2019 18:26:37 +1100
Subject: [PATCH] useSlider docs

---
 README.md                           |  1 +
 docs/useSlider.md                   | 25 +++++++++++++++++++++++++
 src/__stories__/useSlider.story.tsx |  7 +++++--
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ebe6c734db..25b7b13302 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@
   - [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
   - [`useDrop` and `useDropArea`](./docs/useDrop.md) &mdash; tracks file, link and copy-paste drops.
   - [`useFullscreen`](./docs/useFullscreen.md) &mdash; display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)
+  - [`useSlider`](./docs/useSlider.md) &mdash; provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)
   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
   - [`useVideo`](./docs/useVideo.md) &mdash; 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) &mdash; complex waiting management for UIs.
diff --git a/docs/useSlider.md b/docs/useSlider.md
index e69de29bb2..80d05207b4 100644
--- a/docs/useSlider.md
+++ b/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>
+  );
+};
+```
diff --git a/src/__stories__/useSlider.story.tsx b/src/__stories__/useSlider.story.tsx
index 3369b31319..b902951ed2 100644
--- a/src/__stories__/useSlider.story.tsx
+++ b/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>