* disabled prop added

 * fromUser param added to onValueChanged callback
 * Additional onValueChanged event trigger removed

Author: githuboftigran

README.md

@@ -75,13 +75,14 @@ const handleValueChange = useCallback((low, high) => {
 | `high` |  High value of slider | number | Initially `max` value will be set if not provided |
 | `floatingLabel` |  If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | `false` |
 | `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` |
+| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` |
 | `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.<br/>Otherwise label's edges will never get out of component's edges. | boolean | `false` |
 | `renderThumb` | Should render the thumb. | `() => Node` | _**required**_ |
 | `renderRail` | Should render the "rail" for thumbs.<br/>Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ |
 | `renderRailSelected` | Should render the selected part of "rail" for thumbs.<br/>Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ |
 | `renderLabel` | Should render label above thumbs.<br/>If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` |
 | `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` |
-| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
+| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` |
 
 All the other props (e.g. style) will be passed to root container component.
 

hooks.js

@@ -107,15 +107,15 @@ export const useThumbFollower = (containerWidthRef, gestureStateRef, renderConte
 export const useSelectedRail = (inPropsRef, containerWidthRef, thumbWidth, disableRange) => {
   const { current: left } = useRef(new Animated.Value(0));
   const { current: right } = useRef(new Animated.Value(0));
-  const update = () => {
+  const update = useCallback(() => {
     const { low, high, min, max } = inPropsRef.current;
     const { current: containerWidth } = containerWidthRef;
     const fullScale = (max - min) / (containerWidth - thumbWidth);
     const leftValue = (low - min) / fullScale;
     const rightValue = (max - high) / fullScale;
     left.setValue(disableRange ? 0 : leftValue);
     right.setValue(disableRange ? (containerWidth - thumbWidth) - leftValue : rightValue);
-  };
+  }, [inPropsRef, containerWidthRef, disableRange, thumbWidth, left, right]);
   const styles = useMemo(() => ({
     position: 'absolute',
     left,

index.js

@@ -19,6 +19,7 @@ const Slider = (
     floatingLabel,
     allowLabelOverflow,
     disableRange,
+    disabled,
     onValueChanged,
     renderThumb,
     renderLabel,
@@ -58,7 +59,7 @@ const Slider = (
     const lowPosition = (low - min) / (max - min) * (containerWidth - thumbWidth);
     lowThumbX.setValue(lowPosition);
     updateSelectedRail();
-    onValueChanged(low, high);
+    onValueChanged(low, high, false);
   }, [disableRange, inPropsRef, max, min, onValueChanged, thumbWidth, updateSelectedRail]);
 
   useEffect(() => {
@@ -112,6 +113,9 @@ const Slider = (
     onShouldBlockNativeResponder: trueFunc,
 
     onPanResponderGrant: ({ nativeEvent }, gestureState) => {
+      if (disabled) {
+        return;
+      }
       const { numberActiveTouches } = gestureState;
       if (numberActiveTouches > 1) {
         return;
@@ -144,7 +148,7 @@ const Slider = (
         gestureStateRef.current.lastValue = value;
         gestureStateRef.current.lastPosition = absolutePosition + thumbWidth / 2;
         (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
-        onValueChanged(isLow ? value : low, isLow ? high : value);
+        onValueChanged(isLow ? value : low, isLow ? high : value, true);
         (isLow ? setLow : setHigh)(value);
         labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value);
         notchUpdate && notchUpdate(gestureStateRef.current.lastPosition, value);
@@ -158,12 +162,12 @@ const Slider = (
       });
     },
 
-    onPanResponderMove: Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
+    onPanResponderMove: disabled ? undefined : Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
 
     onPanResponderRelease: () => {
       setPressed(false);
     },
-  }), [pointerX, inPropsRef, thumbWidth, disableRange, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
+  }), [pointerX, inPropsRef, thumbWidth, disableRange, disabled, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
 
   return (
     <View {...restProps}>
@@ -202,6 +206,7 @@ Slider.propTypes = {
   high: PropTypes.number,
   allowLabelOverflow: PropTypes.bool,
   disableRange: PropTypes.bool,
+  disabled: PropTypes.bool,
   floatingLabel: PropTypes.bool,
   renderLabel: PropTypes.func,
   renderNotch: PropTypes.func,
@@ -213,6 +218,7 @@ Slider.propTypes = {
 Slider.defaultProps = {
   allowLabelOverflow: false,
   disableRange: false,
+  disabled: false,
   floatingLabel: false,
   onValueChanged: noop,
 };