Slider/add throttleTime prop (#3020)

* Slider/add disableTrottling prop

* add throttleTime props (instead of disable)

* add default 200

Author: liatnetach

src/incubator/Slider/index.tsx

@@ -139,6 +139,10 @@ export interface SliderProps extends AccessibilityProps {
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
+  /** 
+   * Control the throttle time of the onValueChange and onRangeChange callbacks
+   */
+  throttleTime?: number;
 }
 
 type Props = SliderProps & ForwardRefInjectedProps<SliderRef>;
@@ -188,7 +192,8 @@ const Slider = React.memo((props: Props) => {
     useGap = true,
     accessible = true,
     testID,
-    enableThumbShadow = true
+    enableThumbShadow = true,
+    throttleTime = 200
   } = themeProps;
 
   const accessibilityProps = useMemo(() => {
@@ -277,11 +282,11 @@ const Slider = React.memo((props: Props) => {
     } else {
       didValueUpdate.current = false;
     }
-  }, 200), [onValueChange]);
+  }, throttleTime), [onValueChange]);
 
   const onRangeChangeThrottled = useCallback(_.throttle((min, max) => {
     onRangeChange?.({min, max});
-  }, 100), [onRangeChange]);
+  }, throttleTime), [onRangeChange]);
 
   useAnimatedReaction(() => {
     return Math.round(defaultThumbOffset.value);

src/incubator/Slider/slider.api.json

@@ -91,6 +91,11 @@
       "type": "boolean",
       "description": "If true the component will have accessibility features enabled"
     },
+    {
+      "name": "throttleTime",
+      "type": "number",
+      "description": "Control the throttle time of the onValueChange and onRangeChange callbacks"
+    },
     {"name": "testID", "type": "string", "description": "The component test id"}
   ],
   "snippet": [