miblanchard / react-native-slider

A pure JavaScript <Slider> component for react-native and react-native-web
MIT License
377 stars 67 forks source link

✨ feat: Added Minimum Step Constraint to Prevent Thumb Overlap on #453

Open anasmassnaoui opened 1 month ago

anasmassnaoui commented 1 month ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @miblanchard/react-native-slider@2.6.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@miblanchard/react-native-slider/lib/index.js b/node_modules/@miblanchard/react-native-slider/lib/index.js
index 92df57a..2cf34f2 100644
--- a/node_modules/@miblanchard/react-native-slider/lib/index.js
+++ b/node_modules/@miblanchard/react-native-slider/lib/index.js
@@ -196,10 +196,25 @@ export class Slider extends PureComponent {
         }
         this.props?.onSlidingStart?.(this._getRawValues(this.state.values), this._activeThumbIndex);
     };
+    _hasViolatedStepsBetweenThumbs = (gestureState) => {
+        const values = this._getRawValues(this.state.values); 
+        if (values.length > 1) {
+            const stepsBetweenThumbs = this.props.stepsBetweenThumbs;
+            const thumbIndex = this._activeThumbIndex;
+            const secondThumbIndex = thumbIndex === 0 ? 1 : 0;
+            const secondValue = values[secondThumbIndex];
+            const dist = Math.abs(this._getValue(gestureState) - secondValue)
+            if (stepsBetweenThumbs && dist <= stepsBetweenThumbs) {
+                return true;
+            }
+        }
+        return false;
+    }
     _handlePanResponderMove = (_e, gestureState) => {
-        if (this.props.disabled) {
+        if (this.props.disabled || this._hasViolatedStepsBetweenThumbs(gestureState)) {
             return;
         }
+
         this._setCurrentValue(this._getValue(gestureState), this._activeThumbIndex, () => {
             this.props?.onValueChange?.(this._getRawValues(this.state.values), this._activeThumbIndex);
         });
@@ -209,7 +224,7 @@ export class Slider extends PureComponent {
         return false;
     };
     _handlePanResponderEnd = (_e, gestureState) => {
-        if (this.props.disabled) {
+        if (this.props.disabled || this._hasViolatedStepsBetweenThumbs(gestureState)) {
             return;
         }
         this._setCurrentValue(this._getValue(gestureState), this._activeThumbIndex, () => {
diff --git a/node_modules/@miblanchard/react-native-slider/lib/types.d.ts b/node_modules/@miblanchard/react-native-slider/lib/types.d.ts
index e989509..e60bfb4 100644
--- a/node_modules/@miblanchard/react-native-slider/lib/types.d.ts
+++ b/node_modules/@miblanchard/react-native-slider/lib/types.d.ts
@@ -34,6 +34,7 @@ export declare type SliderProps = {
     renderMinimumTrackComponent?: () => React.ReactNode;
     renderTrackMarkComponent?: (index: number) => React.ReactNode;
     step?: number;
+    stepsBetweenThumbs?: number;
     thumbImage?: ImageSourcePropType;
     thumbStyle?: ViewStyle;
     thumbTintColor?: string;

This issue body was partially generated by patch-package.