feat: add onDisabledChange callback to sync disabled handles in editable mode

Author: 刘欢

docs/examples/disabled-handle.tsx

@@ -24,6 +24,7 @@ const EditableWithDisabled = () => {
         value={value}
         onChange={(v) => setValue(v as number[])}
         disabled={disabled}
+        onDisabledChange={setDisabled}
       />
       <div style={{ marginTop: 16 }}>
         {value.map((val, index) => (
@@ -90,8 +91,28 @@ const DisabledHandleAsBoundary = () => {
   );
 };
 
+const SingleSlider = () => {
+  const [value1, setValue1] = useState(30);
+  const [value2, setValue2] = useState(30);
+
+  return (
+    <div>
+      <Slider value={value1} onChange={(v) => setValue1(v as number)} disabled />
+        <br/>
+      <Slider value={value2} onChange={(v) => setValue2(v as number)} disabled={false} />
+    </div>
+  );
+}
+
 export default () => (
   <div>
+    <div>
+      single handle disabled
+      <SingleSlider />
+    </div>
+    <div>
+
+    </div>
     <div style={style}>
       <h3>Disabled Handle + Draggable Track</h3>
       <p>Toggle checkboxes to disable/enable specific handles. Drag the track area to move the range.</p>

src/Slider.tsx

@@ -78,6 +78,8 @@ export interface SliderProps<ValueType = number | number[]> {
   /** @deprecated Use `onChangeComplete` instead */
   onAfterChange?: (value: ValueType) => void;
   onChangeComplete?: (value: ValueType) => void;
+  /** Callback when disabled array needs to be updated (e.g., when handles are added/removed in editable mode) */
+  onDisabledChange?: (disabled: boolean[]) => void;
 
   // Cross
   allowCross?: boolean;
@@ -149,6 +151,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     onBeforeChange,
     onAfterChange,
     onChangeComplete,
+    onDisabledChange,
 
     // Cross
     allowCross = true,
@@ -191,9 +194,12 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   const disabled = React.useMemo(() => {
     if (typeof rawDisabled === 'boolean') {
       return rawDisabled;
-    };
+    }
+    if (Array.isArray(value)) {
+      return value.every((_, index) => rawDisabled[index]);
+    }
 
-    return Array.isArray(value) && value.length === rawDisabled.length && rawDisabled.every(Boolean);
+    return false;
   }, [rawDisabled, value]);
 
   const isHandleDisabled = React.useCallback(
@@ -315,6 +321,25 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     // Order first
     const cloneNextValues = [...nextValues].sort((a, b) => a - b);
 
+    // Sync disabled array when values length changes (add/remove handles in editable mode)
+    if (
+      typeof rawDisabled !== 'boolean' &&
+      Array.isArray(rawDisabled) &&
+      cloneNextValues.length !== rawValues.length
+    ) {
+      const newDisabled = [...rawDisabled];
+
+      if (cloneNextValues.length > rawValues.length) {
+        const index = cloneNextValues.findIndex((item) => !rawValues.includes(item));
+        newDisabled.splice(index, 0, false);
+      } else if (cloneNextValues.length < rawValues.length) {
+        const index = rawValues.findIndex((item) => !cloneNextValues.includes(item));
+        newDisabled.splice(index, 1);
+      }
+
+      onDisabledChange?.(newDisabled);
+    }
+
     // Trigger event if needed
     if (onChange && !isEqual(cloneNextValues, rawValues, true)) {
       onChange(getTriggerValue(cloneNextValues));

tests/Range.test.tsx

@@ -1003,5 +1003,66 @@ describe('Range', () => {
       // Should not trigger onChange because all handles are disabled
       expect(onChange).not.toHaveBeenCalled();
     });
+
+    it('editable: onDisabledChange called when adding handle', () => {
+      const onChange = jest.fn();
+      const onDisabledChange = jest.fn();
+      const { container } = render(
+        <Slider
+          range={{ editable: true }}
+          value={[0, 100]}
+          disabled={[true, false]}
+          onChange={onChange}
+          onDisabledChange={onDisabledChange}
+        />,
+      );
+
+      // Click to add a handle between 0 and 100
+      doMouseDown(container, 50, 'rc-slider', true);
+
+      expect(onChange).toHaveBeenCalledWith([0, 50, 100]);
+      expect(onDisabledChange).toHaveBeenCalledWith([true, false, false]);
+    });
+
+    it('editable: onDisabledChange called when removing handle', () => {
+      const onChange = jest.fn();
+      const onDisabledChange = jest.fn();
+      const { container } = render(
+        <Slider
+          range={{ editable: true }}
+          value={[0, 50, 100]}
+          disabled={[false, true, false]}
+          onChange={onChange}
+          onDisabledChange={onDisabledChange}
+        />,
+      );
+
+      // Drag first handle (enabled) out to delete it
+      doMouseMove(container, 0, 1000);
+
+      expect(onChange).toHaveBeenCalledWith([50, 100]);
+      expect(onDisabledChange).toHaveBeenCalledWith([true, false]);
+    });
+
+    it('editable: disabled array stays in sync when adding between disabled handles', () => {
+      const onChange = jest.fn();
+      const onDisabledChange = jest.fn();
+      const { container } = render(
+        <Slider
+          range={{ editable: true }}
+          value={[20, 60]}
+          disabled={[true, true]}
+          onChange={onChange}
+          onDisabledChange={onDisabledChange}
+        />,
+      );
+
+      // Click to add a handle between 20 and 60
+      doMouseDown(container, 40, 'rc-slider', true);
+
+      // Should not trigger onChange because both surrounding handles are disabled
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onDisabledChange).not.toHaveBeenCalled();
+    });
   });
 });