Markers don't move in one direction when overlapping

[nicholasc120]

• I have searched existing issues
• I am using the latest multi slider version

I'm using the MultiSlider with two markers. when they overlap each other on the left side, I'm unable to move the marker down until i move the other marker back up. Likewise, when both markers overlap on the right side, I cannot move one marker up until i move the other marker down.

For example, I'm using a slider with min and max values of 1 and 4. If I move both markers to 2, I can't move the lower marker to 1 until I move the upper marker to 3. Likewise, if I move both markers to 3, I can't move the upper marker to 4 until I move the lower marker to 2.

Steps to Reproduce

<MultiSlider
            values={[multiSliderValue[0], multiSliderValue[1]]}
            sliderLength={280}
            onValuesChange={
                (newValues) => {
                    setMultiSliderValue(newValues)
                 }
            }
            min={1}
            max={4}
            allowOverlap={true}
            smoothSnapped
/>

Move both markers to 2 and then try and move one of them to 1, or move both markers to 3 and then try to move one of them to 4

Expected Behavior

I thought if it overlapped on the left and I dragged the marker down, the left marker would move down, and if it overlapped on the right and I dragged the marker right, the right marker would move up.

Actual Behavior

Trying to move the marker in the direction of the overlap doesn't do anything.

[ertandk]

I'm experiencing this problem too. Can you add a solution regarding this?

[ptomasroos]

Have you tried if this PR helps your case? #236

[smitroshin]

Screen.Recording.2025-08-18.at.11.44.51.mov

@ptomasroos+react-native-multi-slider+2.2.2.patch

diff --git a/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js b/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
index f3114aa..0a8313b 100755
--- a/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
+++ b/node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js
@@ -148,6 +148,12 @@ export default class MultiSlider extends React.Component {
     const unconfined = I18nManager.isRTL
       ? this.state.pastOne - accumDistance
       : accumDistance + this.state.pastOne;
+    
+    // Check if moving right and would push second pin
+    const isMovingRight = I18nManager.isRTL ? accumDistance < 0 : accumDistance > 0;
+    const wouldPushSecondPin = this.props.allowOverlap && isMovingRight && 
+      unconfined >= this.state.positionTwo && this.props.values.length === 2;
+    
     var bottom = 0;
     var trueTop =
       this.state.positionTwo -
@@ -157,6 +163,14 @@ export default class MultiSlider extends React.Component {
         ? this.props.minMarkerOverlapDistance
         : this.stepLength);
     var top = trueTop === 0 ? 0 : trueTop || this.props.sliderLength;
+    
+    // If pushing second pin, allow movement up to slider end
+    if (wouldPushSecondPin) {
+      top = this.props.sliderLength;
+    }
+    
+
+    
     var confined =
       unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
     var slipDisplacement = this.props.touchDimensions.slipDisplacement;
@@ -175,28 +189,47 @@ export default class MultiSlider extends React.Component {
         this.optionsArray,
         this.props.sliderLength,
       );
-      this.setState({
-        positionOne: this.props.snapped ? snapped : confined,
-      });
       
-      if (value !== this.state.valueOne) {
-        this.setState(
-          {
-            valueOne: value,
-          },
-          () => {
-            var change = [this.state.valueOne];
-            if (this.state.valueTwo) {
-              change.push(this.state.valueTwo);
-            }
-            this.props.onValuesChange(change);
-
-            this.props.onMarkersPosition([
-              this.state.positionOne,
-              this.state.positionTwo,
-            ]);
-          },
-        );
+      const newPositionOne = this.props.snapped ? snapped : confined;
+      
+      // If pushing second pin, move both
+      if (wouldPushSecondPin) {
+        this.setState({
+          positionOne: newPositionOne,
+          positionTwo: newPositionOne,
+          valueOne: value,
+          valueTwo: value,
+        }, () => {
+          this.props.onValuesChange([this.state.valueOne, this.state.valueTwo]);
+          this.props.onMarkersPosition([
+            this.state.positionOne,
+            this.state.positionTwo,
+          ]);
+        });
+      } else {
+        this.setState({
+          positionOne: newPositionOne,
+        });
+
+        if (value !== this.state.valueOne) {
+          this.setState(
+            {
+              valueOne: value,
+            },
+            () => {
+              var change = [this.state.valueOne];
+              if (this.state.valueTwo) {
+                change.push(this.state.valueTwo);
+              }
+              this.props.onValuesChange(change);
+
+              this.props.onMarkersPosition([
+                this.state.positionOne,
+                this.state.positionTwo,
+              ]);
+            },
+          );
+        }
       }
     }
   };
@@ -216,6 +249,12 @@ export default class MultiSlider extends React.Component {
     const unconfined = I18nManager.isRTL
       ? this.state.pastTwo - accumDistance
       : accumDistance + this.state.pastTwo;
+    
+    // Check if moving left and would push first pin
+    const isMovingLeft = I18nManager.isRTL ? accumDistance > 0 : accumDistance < 0;
+    const wouldPushFirstPin = this.props.allowOverlap && isMovingLeft && 
+      unconfined <= this.state.positionOne && this.props.values.length === 2;
+    
     var bottom =
       this.state.positionOne +
       (this.props.allowOverlap
@@ -224,6 +263,14 @@ export default class MultiSlider extends React.Component {
         ? this.props.minMarkerOverlapDistance
         : this.stepLength);
     var top = this.props.sliderLength;
+    
+    // If pushing first pin, allow movement down to slider start
+    if (wouldPushFirstPin) {
+      bottom = 0;
+    }
+    
+
+    
     var confined =
       unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
     var slipDisplacement = this.props.touchDimensions.slipDisplacement;
@@ -243,27 +290,45 @@ export default class MultiSlider extends React.Component {
         this.props.sliderLength,
       );
 
-      this.setState({
-        positionTwo: this.props.snapped ? snapped : confined,
-      });
-
-      if (value !== this.state.valueTwo) {
-        this.setState(
-          {
-            valueTwo: value,
-          },
-          () => {
-            this.props.onValuesChange([
-              this.state.valueOne,
-              this.state.valueTwo,
-            ]);
-
-            this.props.onMarkersPosition([
-              this.state.positionOne,
-              this.state.positionTwo,
-            ]);
-          },
-        );
+      const newPositionTwo = this.props.snapped ? snapped : confined;
+      
+      // If pushing first pin, move both
+      if (wouldPushFirstPin) {
+        this.setState({
+          positionOne: newPositionTwo,
+          positionTwo: newPositionTwo,
+          valueOne: value,
+          valueTwo: value,
+        }, () => {
+          this.props.onValuesChange([this.state.valueOne, this.state.valueTwo]);
+          this.props.onMarkersPosition([
+            this.state.positionOne,
+            this.state.positionTwo,
+          ]);
+        });
+      } else {
+        this.setState({
+          positionTwo: newPositionTwo,
+        });
+
+        if (value !== this.state.valueTwo) {
+          this.setState(
+            {
+              valueTwo: value,
+            },
+            () => {
+              this.props.onValuesChange([
+                this.state.valueOne,
+                this.state.valueTwo,
+              ]);
+
+              this.props.onMarkersPosition([
+                this.state.positionOne,
+                this.state.positionTwo,
+              ]);
+            },
+          );
+        }
       }
     }
   };
@@ -274,9 +339,12 @@ export default class MultiSlider extends React.Component {
       return;
     }
 
+    // When a pin is released, update the "past" state for BOTH pins.
+    // This prevents a jump on the next drag if one pin has pushed the other.
     this.setState(
       {
         pastOne: this.state.positionOne,
+        pastTwo: this.state.positionTwo,
         onePressed: !this.state.onePressed,
       },
       () => {
@@ -295,10 +363,13 @@ export default class MultiSlider extends React.Component {
       return;
     }
 
+    // When a pin is released, update the "past" state for BOTH pins.
+    // This prevents a jump on the next drag if one pin has pushed the other.
     this.setState(
       {
-        twoPressed: !this.state.twoPressed,
+        pastOne: this.state.positionOne,
         pastTwo: this.state.positionTwo,
+        twoPressed: !this.state.twoPressed,
       },
       () => {
         this.props.onValuesChangeFinish([