feat: prevent handle movement across disabled boundaries in range slider

Author: 刘欢

src/Slider.tsx

@@ -430,6 +430,14 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
           return;
         }
 
+        if (leftDisabled && newValue < rawValues[valueBeforeIndex]) {
+          return;
+        }
+
+        if (rightDisabled && newValue > rawValues[valueBeforeIndex + 1]) {
+          return;
+        }
+
         cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
         focusIndex = valueBeforeIndex + 1;
       } else {
@@ -454,7 +462,25 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
           valueIndex = nearestIndex;
         }
-        cloneNextValues[valueIndex] = newValue;
+
+        let minBound = mergedMin;
+        let maxBound = mergedMax;
+
+        for (let i = valueIndex - 1; i >= 0; i--) {
+          if (isHandleDisabled(i)) {
+            minBound = rawValues[i];
+            break;
+          }
+        }
+        for (let i = valueIndex + 1; i < rawValues.length; i++) {
+          if (isHandleDisabled(i)) {
+            maxBound = rawValues[i];
+            break;
+          }
+        }
+
+        const clampedValue = Math.max(minBound, Math.min(maxBound, newValue));
+        cloneNextValues[valueIndex] = clampedValue;
         focusIndex = valueIndex;
       }
 

tests/Range.test.tsx

@@ -1064,5 +1064,33 @@ describe('Range', () => {
       expect(onChange).not.toHaveBeenCalled();
       expect(onDisabledChange).not.toHaveBeenCalled();
     });
+
+    it('click to move cannot cross disabled handle boundary', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <Slider range value={[20, 50, 80]} disabled={[true, false, false]} onChange={onChange} />,
+      );
+
+      // Click at position 10, which is left of disabled handle at 20
+      // Nearest enabled handle is 50, but it cannot cross below 20
+      doMouseDown(container, 10, 'rc-slider', true);
+
+      // Should move handle to 20 (boundary), not 10
+      expect(onChange).toHaveBeenCalledWith([20, 20, 80]);
+    });
+
+    it('click to move cannot cross disabled handle on right side', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <Slider range value={[20, 50, 80]} disabled={[false, false, true]} onChange={onChange} />,
+      );
+
+      // Click at position 90, which is right of disabled handle at 80
+      // Nearest enabled handle is 50, but it cannot cross above 80
+      doMouseDown(container, 90, 'rc-slider', true);
+
+      // Should move handle to 80 (boundary), not 90
+      expect(onChange).toHaveBeenCalledWith([20, 80, 80]);
+    });
   });
 });