feat: support disabled as array for range slider

刘欢 · claude · 刘欢 · commit bedc645fdeef · 2026-04-14T10:38:29.000+08:00
- Add support for disabled={[boolean, boolean, ...]} to disable specific handles
- Disabled handles cannot be dragged or moved via keyboard
- Non-disabled handles cannot cross disabled handles
- Clicking slider moves nearest non-disabled handle
- In editable mode, disabled handles cannot be deleted
- Track draggable is disabled when any handle is disabled
- Backward compatible with boolean disabled

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/assets/index.less b/assets/index.less
@@ -105,6 +105,20 @@
       cursor: -webkit-grabbing;
       cursor: grabbing;
     }
+
+    &-disabled {
+      background-color: #fff;
+      border-color: @disabledColor;
+      box-shadow: none;
+      cursor: not-allowed;
+
+      &:hover,
+      &:active {
+        border-color: @disabledColor;
+        box-shadow: none;
+        cursor: not-allowed;
+      }
+    }
   }
 
   &-mark {
diff --git a/docs/demo/disabled-handle.md b/docs/demo/disabled-handle.md
@@ -0,0 +1,9 @@
+---
+title: Disabled Handle
+title.zh-CN: 禁用特定滑块
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/disabled-handle.tsx"></code>
diff --git a/docs/examples/disabled-handle.tsx b/docs/examples/disabled-handle.tsx
@@ -0,0 +1,85 @@
+/* eslint react/no-multi-comp: 0, no-console: 0 */
+import Slider from '@rc-component/slider';
+import React, { useState } from 'react';
+import '../../assets/index.less';
+
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
+
+const BasicDisabledHandle = () => {
+  const [value, setValue] = useState([0, 30, 60, 100]);
+  const [disabled, setDisabled] = useState([true, false, false, true]);
+
+  return (
+    <div>
+      <Slider range value={value} onChange={setValue} disabled={disabled} />
+      <div style={{ marginTop: 16 }}>
+        {value.map((val, index) => (
+          <label key={index} style={{ marginRight: 16 }}>
+            <input
+              type="checkbox"
+              checked={disabled[index]}
+              onChange={() => {
+                const newDisabled = [...disabled];
+                newDisabled[index] = !newDisabled[index];
+                setDisabled(newDisabled);
+              }}
+            />
+            Handle {index + 1} ({val}) {disabled[index] ? 'Disabled' : 'Enabled'}
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const DisabledHandleAsBoundary = () => {
+  const [value, setValue] = useState([10, 50, 90]);
+
+  return (
+    <div>
+      <Slider range value={value} onChange={setValue} disabled={[false, true, false]} />
+      <p style={{ marginTop: 8, color: '#999' }}>
+        Middle handle (50) is disabled and acts as a boundary.
+        First handle cannot go beyond 50, third handle cannot go below 50.
+        Disabled handle has gray border and not-allowed cursor.
+      </p>
+    </div>
+  );
+};
+
+const MultipleDisabledBoundaries = () => {
+  const [value, setValue] = useState([10, 30, 50, 70, 90]);
+
+  return (
+    <div>
+      <Slider range value={value} onChange={setValue} disabled={[true, false, true, false, true]} />
+      <p style={{ marginTop: 8, color: '#999' }}>
+        Handles at 10, 50, 90 are disabled.
+        Handle at 30 can only move between 10-50, handle at 70 can only move between 50-90.
+      </p>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <div style={style}>
+      <h3>Basic Disabled Handle</h3>
+      <p>Toggle checkboxes to disable/enable specific handles</p>
+      <BasicDisabledHandle />
+    </div>
+
+    <div style={style}>
+      <h3>Disabled Handle as Boundary</h3>
+      <DisabledHandleAsBoundary />
+    </div>
+
+    <div style={style}>
+      <h3>Multiple Disabled Boundaries</h3>
+      <MultipleDisabledBoundaries />
+    </div>
+  </div>
+);
diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
@@ -55,7 +55,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     min,
     max,
     direction,
-    disabled,
+    disabled: globalDisabled,
     keyboard,
     range,
     tabIndex,
@@ -65,15 +65,21 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     ariaValueTextFormatterForHandle,
     styles,
     classNames,
+    isHandleDisabled,
   } = React.useContext(SliderContext);
 
+  const handleDisabled =
+    globalDisabled || (isHandleDisabled ? isHandleDisabled(valueIndex) : false);
+
   const handlePrefixCls = `${prefixCls}-handle`;
 
   // ============================ Events ============================
   const onInternalStartMove = (e: React.MouseEvent | React.TouchEvent) => {
-    if (!disabled) {
-      onStartMove(e, valueIndex);
+    if (handleDisabled) {
+      e.stopPropagation();
+      return;
     }
+    onStartMove(e, valueIndex);
   };
 
   const onInternalFocus = (e: React.FocusEvent<HTMLDivElement>) => {
@@ -86,7 +92,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
 
   // =========================== Keyboard ===========================
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!disabled && keyboard) {
+    if (!handleDisabled && keyboard) {
       let offset: number | 'min' | 'max' = null;
 
       // Change the value
@@ -161,12 +167,12 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
 
   if (valueIndex !== null) {
     divProps = {
-      tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
+      tabIndex: handleDisabled ? null : getIndex(tabIndex, valueIndex),
       role: 'slider',
       'aria-valuemin': min,
       'aria-valuemax': max,
       'aria-valuenow': value,
-      'aria-disabled': disabled,
+      'aria-disabled': handleDisabled,
       'aria-label': getIndex(ariaLabelForHandle, valueIndex),
       'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
       'aria-required': getIndex(ariaRequired, valueIndex),
@@ -190,6 +196,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
           [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
           [`${handlePrefixCls}-dragging`]: dragging,
           [`${handlePrefixCls}-dragging-delete`]: draggingDelete,
+          [`${handlePrefixCls}-disabled`]: handleDisabled,
         },
         classNames.handle,
       )}
diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -57,7 +57,7 @@ export interface SliderProps<ValueType = number | number[]> {
   id?: string;
 
   // Status
-  disabled?: boolean;
+  disabled?: boolean | boolean[];
   keyboard?: boolean;
   autoFocus?: boolean;
   onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
@@ -131,8 +131,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
     id,
 
-    // Status
-    disabled = false,
+    disabled: rawDisabled = false,
     keyboard = true,
     autoFocus,
     onFocus,
@@ -188,6 +187,24 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   const handlesRef = React.useRef<HandlesRef>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
+  // ============================ Disabled ============================
+  const disabled = React.useMemo(() => {
+    if (typeof rawDisabled === 'boolean') {
+      return rawDisabled;
+    }
+    return rawDisabled.every((d) => d);
+  }, [rawDisabled]);
+
+  const isHandleDisabled = React.useCallback(
+    (index: number) => {
+      if (typeof rawDisabled === 'boolean') {
+        return rawDisabled;
+      }
+      return rawDisabled[index] || false;
+    },
+    [rawDisabled],
+  );
+
   const direction = React.useMemo<Direction>(() => {
     if (vertical) {
       return reverse ? 'ttb' : 'btt';
@@ -247,6 +264,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     markList,
     allowCross,
     mergedPush,
+    isHandleDisabled,
   );
 
   // ============================ Values ============================
@@ -321,7 +339,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   });
 
   const onDelete = (index: number) => {
-    if (disabled || !rangeEditable || rawValues.length <= minCount) {
+    if (disabled || !rangeEditable || rawValues.length <= minCount || isHandleDisabled(index)) {
       return;
     }
 
@@ -348,6 +366,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     offsetValues,
     rangeEditable,
     minCount,
+    isHandleDisabled,
   );
 
   /**
@@ -378,10 +397,39 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       let focusIndex = valueIndex;
 
       if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) {
+        const leftDisabled = isHandleDisabled(valueBeforeIndex);
+        const rightDisabled = isHandleDisabled(valueBeforeIndex + 1);
+
+        if (leftDisabled && rightDisabled) {
+          return;
+        }
+
         cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
         focusIndex = valueBeforeIndex + 1;
       } else {
+        if (isHandleDisabled(valueIndex)) {
+          let nearestIndex = -1;
+          let nearestDist = mergedMax - mergedMin;
+
+          rawValues.forEach((val, index) => {
+            if (!isHandleDisabled(index)) {
+              const dist = Math.abs(newValue - val);
+              if (dist < nearestDist) {
+                nearestDist = dist;
+                nearestIndex = index;
+              }
+            }
+          });
+
+          // If all handles are disabled, do nothing
+          if (nearestIndex === -1) {
+            return;
+          }
+
+          valueIndex = nearestIndex;
+        }
         cloneNextValues[valueIndex] = newValue;
+        focusIndex = valueIndex;
       }
 
       // Fill value to match default 2 (only when `rawValues` is empty)
@@ -443,7 +491,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   const [keyboardValue, setKeyboardValue] = React.useState<number>(null);
 
   const onHandleOffsetChange = (offset: number | 'min' | 'max', valueIndex: number) => {
-    if (!disabled) {
+    if (!disabled && !isHandleDisabled(valueIndex)) {
       const next = offsetValues(rawValues, offset, valueIndex);
 
       onBeforeChange?.(getTriggerValue(rawValues));
@@ -546,6 +594,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       ariaValueTextFormatterForHandle,
       styles: styles || {},
       classNames: classNames || {},
+      isHandleDisabled,
     }),
     [
       mergedMin,
@@ -565,6 +614,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       ariaValueTextFormatterForHandle,
       styles,
       classNames,
+      isHandleDisabled,
     ],
   );
 
diff --git a/src/Tracks/index.tsx b/src/Tracks/index.tsx
@@ -14,8 +14,18 @@ export interface TrackProps {
 }
 
 const Tracks: React.FC<TrackProps> = (props) => {
-  const { prefixCls, style, values, startPoint, onStartMove } = props;
-  const { included, range, min, styles, classNames } = React.useContext(SliderContext);
+  const { prefixCls, style, values, startPoint, onStartMove: propsOnStartMove } = props;
+  const { included, range, min, styles, classNames, isHandleDisabled } = React.useContext(SliderContext);
+
+  const hasDisabledHandle = React.useMemo(() => {
+    if (!isHandleDisabled) return false;
+    for (let i = 0; i < values.length; i++) {
+      if (isHandleDisabled(i)) return true;
+    }
+    return false;
+  }, [isHandleDisabled, values.length]);
+
+  const onStartMove = hasDisabledHandle ? undefined : propsOnStartMove;
 
   // =========================== List ===========================
   const trackList = React.useMemo(() => {
diff --git a/src/context.ts b/src/context.ts
@@ -19,6 +19,7 @@ export interface SliderContextProps {
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
   classNames: SliderClassNames;
   styles: SliderStyles;
+  isHandleDisabled?: (index: number) => boolean;
 }
 
 const SliderContext = React.createContext<SliderContextProps>({
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -26,6 +26,7 @@ function useDrag(
   offsetValues: OffsetValues,
   editable: boolean,
   minCount: number,
+  isHandleDisabled?: (index: number) => boolean,
 ): [
   draggingIndex: number,
   draggingValue: number,
@@ -91,6 +92,10 @@ function useDrag(
     (valueIndex: number, offsetPercent: number, deleteMark: boolean) => {
       if (valueIndex === -1) {
         // >>>> Dragging on the track
+        if (isHandleDisabled && originValues.some((_, index) => isHandleDisabled(index))) {
+          return;
+        }
+
         const startValue = originValues[0];
         const endValue = originValues[originValues.length - 1];
         const maxStartOffset = min - startValue;
@@ -126,6 +131,10 @@ function useDrag(
 
     // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
     const initialValues = startValues || rawValues;
+    if (isHandleDisabled && isHandleDisabled(valueIndex)) {
+      return;
+    }
+
     const originValue = initialValues[valueIndex];
 
     setDraggingIndex(valueIndex);
diff --git a/src/hooks/useOffset.ts b/src/hooks/useOffset.ts
diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export interface SliderContextProps {`
`19`	`19`	`ariaValueTextFormatterForHandle?: AriaValueFormat \| AriaValueFormat[];`
`20`	`20`	`classNames: SliderClassNames;`
`21`	`21`	`styles: SliderStyles;`
	`22`	`+ isHandleDisabled?: (index: number) => boolean;`
`22`	`23`	`}`
`23`	`24`
`24`	`25`	`const SliderContext = React.createContext<SliderContextProps>({`