From d1eacbaed75ec7eadcc718d8440f676300f90c1b Mon Sep 17 00:00:00 2001
From: woody <woody@triple-corp.com>
Date: Fri, 7 Feb 2020 11:23:46 +0900
Subject: [PATCH] =?UTF-8?q?[#459]=20Feature:=20=EC=99=B8=EB=B6=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20debounceTIme=20=EC=A1=B0=EC=A0=88=ED=95=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/stories/slider.stories.js      | 5 +++++
 packages/slider/src/slider-base.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/stories/slider.stories.js b/docs/stories/slider.stories.js
index e40f6f3ea0..2c6fcac72e 100644
--- a/docs/stories/slider.stories.js
+++ b/docs/stories/slider.stories.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { number } from '@storybook/addon-knobs'
 
 import { SingleSlider, RangeSlider } from '@titicaca/slider'
 import { Text } from '@titicaca/core-elements'
@@ -31,6 +32,7 @@ storiesOf('Slider', module)
           max={500000}
           onChange={setValue}
           labelComponent={SingleLabel}
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -48,6 +50,7 @@ storiesOf('Slider', module)
           onChange={setValue}
           labelComponent={SingleLabel}
           nonLinear
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -64,6 +67,7 @@ storiesOf('Slider', module)
           max={500000}
           onChange={setValues}
           labelComponent={RangeLabel}
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
@@ -81,6 +85,7 @@ storiesOf('Slider', module)
           onChange={setValues}
           labelComponent={RangeLabel}
           nonLinear
+          debounceTime={number('debounceTime')}
         />
       </div>
     )
diff --git a/packages/slider/src/slider-base.tsx b/packages/slider/src/slider-base.tsx
index 10cf7dadfe..945b0a3c98 100644
--- a/packages/slider/src/slider-base.tsx
+++ b/packages/slider/src/slider-base.tsx
@@ -23,6 +23,7 @@ export interface SliderBaseProps {
   }>
   onChange: (values: SliderValue) => void
   nonLinear?: boolean
+  debounceTime?: number
 }
 
 const IDENTICAL_SCALE: ValueTransformer = (x) => x
@@ -59,6 +60,7 @@ export default function SliderBase({
   onChange,
   labelComponent: LabelComponent,
   nonLinear,
+  debounceTime = 500,
   children,
 }: PropsWithChildren<SliderBaseProps>) {
   const [values, setValues] = useState<SliderValue>(initialValues || [0])
@@ -77,8 +79,9 @@ export default function SliderBase({
     return value
   }
 
-  const debouncedChangeHandler = useCallback(debounce(onChange, 500), [
+  const debouncedChangeHandler = useCallback(debounce(onChange, debounceTime), [
     onChange,
+    debounceTime,
   ])
 
   useEffect(() => {