docs: update README and examples to clarify disabled handle functionality

Author: 刘欢

README.md

@@ -108,7 +108,7 @@ The following APIs are shared by Slider and Range.
 | handle | (props) => React.ReactNode | | A handle generator which could be used to customized handle. |
 | included | boolean | `true` | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
 | reverse | boolean | `false` | If the value is `true`, it means the component is rendered reverse. |
-| disabled | boolean \| boolean[] | `false` | If `true`, handles can't be moved. Can also be an array to disable specific handles in range mode, e.g. `[true, false, true]` disables first and third handles. |
+| disabled | boolean \| boolean[] | `false` | If `true`, handles can't be moved. This prop can also be an array to disable specific handles in range mode, e.g. `[true, false, true]` disables first and third handles. |
 | keyboard | boolean | `true` | Support using keyboard to move handlers. |
 | dots | boolean | `false` | When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots. |
 | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |

docs/examples/disabled-handle.tsx

@@ -49,17 +49,16 @@ const EditableWithDisabled = () => {
     </div>
   );
 };
-
+const defaultValue = [0, 30, 60, 100];
 const BasicDisabledHandle = () => {
-  const [value, setValue] = useState<number[]>([0, 30, 60, 100]);
   const [disabled, setDisabled] = useState([true]);
 
   return (
     <div>
-      <Slider range={{ draggableTrack: true }} value={value} onChange={(v) => setValue(v as number[])} disabled={disabled} />
+      <Slider range={{ draggableTrack: true }} defaultValue={defaultValue} disabled={disabled} />
       Slider disabled {JSON.stringify(disabled)}
       <div style={{ marginTop: 16 }}>
-        {value.map((val, index) => (
+        {defaultValue.map((_, index) => (
           <label key={index} style={{ marginRight: 16 }}>
             <input
               type="checkbox"
@@ -70,7 +69,7 @@ const BasicDisabledHandle = () => {
                 setDisabled(newDisabled);
               }}
             />
-            Handle {index + 1} ({val}) {disabled[index] ? 'Disabled' : 'Enabled'}
+            Handle {index + 1} {disabled[index] ? 'Disabled' : 'Enabled'}
           </label>
         ))}
       </div>
@@ -111,9 +110,6 @@ export default () => (
     <div>
       single handle disabled
       <SingleSlider />
-    </div>
-    <div>
-
     </div>
     <div style={style}>
       <h3>Disabled Handle + Draggable Track</h3>

src/Slider.tsx

@@ -189,18 +189,19 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
   const handlesRef = React.useRef<HandlesRef>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const [mergedValue, setValue] = useControlledState(defaultValue, value);
 
   // ============================ Disabled ============================
   const disabled = React.useMemo(() => {
     if (typeof rawDisabled === 'boolean') {
       return rawDisabled;
     }
-    if (Array.isArray(value)) {
-      return value.every((_, index) => rawDisabled[index]);
+    if (Array.isArray(rawDisabled)) {
+      const values = Array.isArray(mergedValue) ? mergedValue : [mergedValue];
+      return values.every((_, index) => rawDisabled[index]);
     }
-
     return false;
-  }, [rawDisabled, value]);
+  }, [rawDisabled, mergedValue]);
 
   const isHandleDisabled = React.useCallback(
     (index: number) => {
@@ -275,7 +276,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   );
 
   // ============================ Values ============================
-  const [mergedValue, setValue] = useControlledState(defaultValue, value);
 
   const rawValues = React.useMemo(() => {
     const valueList =
@@ -330,8 +330,9 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       const newDisabled = [...rawDisabled];
 
       if (cloneNextValues.length > rawValues.length) {
-        const index = cloneNextValues.findIndex((item) => !rawValues.includes(item));
-        newDisabled.splice(index, 0, false);
+        const index = cloneNextValues.findIndex((item, i) => item !== rawValues[i]);
+        const insertIndex = index === -1 ? rawValues.length : index;
+        newDisabled.splice(insertIndex, 0, false);
       } else if (cloneNextValues.length < rawValues.length) {
         const index = rawValues.findIndex((item) => !cloneNextValues.includes(item));
         newDisabled.splice(index, 1);

src/hooks/useOffset.ts

@@ -244,33 +244,45 @@ export default function useOffset(
       // =============== Push ==================
 
       // >>>>>> Basic push
-      // End values
+      // End values (skip disabled handles)
       for (let i = valueIndex + 1; i < nextValues.length; i += 1) {
+        if (isHandleDisabled?.(i)) {
+          break; // Stop pushing when hitting a disabled handle
+        }
         let changed = true;
         while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
           ({ value: nextValues[i], changed } = offsetChangedValue(nextValues, 1, i));
         }
       }
 
-      // Start values
+      // Start values (skip disabled handles)
       for (let i = valueIndex; i > 0; i -= 1) {
+        if (isHandleDisabled?.(i - 1)) {
+          break; // Stop pushing when hitting a disabled handle
+        }
         let changed = true;
         while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
           ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1));
         }
       }
 
       // >>>>> Revert back to safe push range
-      // End to Start
+      // End to Start (skip disabled handles)
       for (let i = nextValues.length - 1; i > 0; i -= 1) {
+        if (isHandleDisabled?.(i) || isHandleDisabled?.(i - 1)) {
+          continue; // Skip if either handle is disabled
+        }
         let changed = true;
         while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
           ({ value: nextValues[i - 1], changed } = offsetChangedValue(nextValues, -1, i - 1));
         }
       }
 
-      // Start to End
+      // Start to End (skip disabled handles)
       for (let i = 0; i < nextValues.length - 1; i += 1) {
+        if (isHandleDisabled?.(i) || isHandleDisabled?.(i + 1)) {
+          continue; // Skip if either handle is disabled
+        }
         let changed = true;
         while (needPush(nextValues[i + 1] - nextValues[i]) && changed) {
           ({ value: nextValues[i + 1], changed } = offsetChangedValue(nextValues, 1, i + 1));

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]);
+    });
   });
 });