Skip to content

Commit ded7506

Browse files
刘欢claude
andcommitted
fix: fix all handles disabled being treated as global disabled
When disabled prop is an array like [true], the previous logic used .every() which returned true, causing the entire slider to be disabled. Now returns false to allow per-handle disabled state. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 4f28cc4 commit ded7506

File tree

2 files changed

+4
-23
lines changed

2 files changed

+4
-23
lines changed

docs/examples/disabled-handle.tsx

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const BasicDisabledHandle = () => {
1414

1515
return (
1616
<div>
17-
<Slider range value={value} onChange={(v) => setValue(v as number[])} disabled={disabled} />
17+
<Slider range={{ draggableTrack: true }} value={value} onChange={(v) => setValue(v as number[])} disabled={disabled} />
1818
<div style={{ marginTop: 16 }}>
1919
{value.map((val, index) => (
2020
<label key={index} style={{ marginRight: 16 }}>
@@ -50,36 +50,17 @@ const DisabledHandleAsBoundary = () => {
5050
);
5151
};
5252

53-
const MultipleDisabledBoundaries = () => {
54-
const [value, setValue] = useState<number[]>([10, 30, 50, 70, 90]);
55-
56-
return (
57-
<div>
58-
<Slider range value={value} onChange={(v) => setValue(v as number[])} disabled={[true, false, true, false, true]} />
59-
<p style={{ marginTop: 8, color: '#999' }}>
60-
Handles at 10, 50, 90 are disabled.
61-
Handle at 30 can only move between 10-50, handle at 70 can only move between 50-90.
62-
</p>
63-
</div>
64-
);
65-
};
66-
6753
export default () => (
6854
<div>
6955
<div style={style}>
70-
<h3>Basic Disabled Handle</h3>
71-
<p>Toggle checkboxes to disable/enable specific handles</p>
56+
<h3>Disabled Handle + Draggable Track</h3>
57+
<p>Toggle checkboxes to disable/enable specific handles. Drag the track area to move the range.</p>
7258
<BasicDisabledHandle />
7359
</div>
7460

7561
<div style={style}>
7662
<h3>Disabled Handle as Boundary</h3>
7763
<DisabledHandleAsBoundary />
7864
</div>
79-
80-
<div style={style}>
81-
<h3>Multiple Disabled Boundaries</h3>
82-
<MultipleDisabledBoundaries />
83-
</div>
8465
</div>
8566
);

src/Slider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
192192
if (typeof rawDisabled === 'boolean') {
193193
return rawDisabled;
194194
}
195-
return rawDisabled.every((d) => d);
195+
return false;
196196
}, [rawDisabled]);
197197

198198
const isHandleDisabled = React.useCallback(

0 commit comments

Comments
 (0)