From 138b43cd1ac9ea7c76a1a42fca48ebdcb94e1006 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Fri, 24 Apr 2020 18:36:32 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20onScrubStop=20provide=20?=
 =?UTF-8?q?value=20where=20scrub=20stopped?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/useSlider.ts            | 7 +++++--
 stories/useSlider.story.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/useSlider.ts b/src/useSlider.ts
index 85677b65..6e3a382b 100644
--- a/src/useSlider.ts
+++ b/src/useSlider.ts
@@ -13,7 +13,7 @@ export interface State {
 export interface Options {
   onScrub: (value: number) => void;
   onScrubStart: () => void;
-  onScrubStop: () => void;
+  onScrubStop: (value: number) => void;
   reverse: boolean;
   styles: boolean | CSSProperties;
   vertical?: boolean;
@@ -24,12 +24,15 @@ const noop = () => {};
 const useSlider = (ref: RefObject<HTMLElement>, options: Partial<Options> = {}): State => {
   const isMounted = useMountedState();
   const isSliding = useRef(false);
+  const valueRef = useRef(0);
   const frame = useRef(0);
   const [state, setState] = useSetState<State>({
     isSliding: false,
     value: 0,
   });
 
+  valueRef.current = state.value;
+
   useEffect(() => {
     if (isClient) {
       const styles = options.styles === undefined ? true : options.styles;
@@ -50,7 +53,7 @@ const useSlider = (ref: RefObject<HTMLElement>, options: Partial<Options> = {}):
 
       const stopScrubbing = () => {
         if (isSliding.current && isMounted()) {
-          (options.onScrubStop || noop)();
+          (options.onScrubStop || noop)(valueRef.current);
           isSliding.current = false;
           setState({ isSliding: false });
           unbindEvents();
diff --git a/stories/useSlider.story.tsx b/stories/useSlider.story.tsx
index 9626a8b4..c0700f4b 100644
--- a/stories/useSlider.story.tsx
+++ b/stories/useSlider.story.tsx
@@ -5,7 +5,11 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const ref = React.useRef(null);
-  const state = useSlider(ref);
+  const state = useSlider(ref, {
+    onScrubStop: (value) => {
+      console.log('onScrubStop', value);
+    },
+  });
 
   return (
     <div>