diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index e7b0ec8870..2a6713d39c 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -83,6 +83,46 @@ Array [
]
`;
+exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
+
+`;
+
exports[`renders ./components/slider/demo/event.md correctly 1`] = `
Array [
, mountNode);
+```
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index e8c8fe77db..a98d5f543e 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -35,6 +35,12 @@ To input a value in a range.
| onAfterChange | Fire when onmouseup is fired | (value) => void | - | |
| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | |
+### range
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| draggableTrack | Whether range track can be drag | boolean | false | 4.10.0 |
+
## Methods
| Name | Description | Version |
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index c86894228a..e72d4b7f23 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -59,7 +59,7 @@ export interface SliderSingleProps extends SliderBaseProps {
}
export interface SliderRangeProps extends SliderBaseProps {
- range: true;
+ range: true | SliderRange;
value?: [number, number];
defaultValue?: [number, number];
onChange?: (value: [number, number]) => void;
@@ -68,6 +68,10 @@ export interface SliderRangeProps extends SliderBaseProps {
trackStyle?: React.CSSProperties[];
}
+interface SliderRange {
+ draggableTrack?: boolean;
+}
+
export type Visibles = { [index: number]: boolean };
const Slider = React.forwardRef(
@@ -136,15 +140,24 @@ const Slider = React.forwardRef(
const cls = classNames(className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
+
// make reverse default on rtl direction
if (direction === 'rtl' && !restProps.vertical) {
restProps.reverse = !restProps.reverse;
}
+
+ // extrack draggableTrack from range={{ ... }}
+ let draggableTrack: boolean | undefined;
+ if (typeof range === 'object') {
+ draggableTrack = range.draggableTrack;
+ }
+
if (range) {
return (
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index 5cfe349980..20d362fe6e 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| marks | 刻度标记,key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内,每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: object, label: ReactNode } } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
-| range | 双滑块模式 | boolean | false | |
+| range | 双滑块模式 | boolean \| [range](#range) | false | |
| reverse | 反向坐标轴 | boolean | false | |
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 `marks` 不为空对象时,可以设置 `step` 为 null,此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值,若为 null,则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | |
@@ -36,6 +36,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| onAfterChange | 与 `onmouseup` 触发时机一致,把当前值作为参数传入 | (value) => void | - | |
| onChange | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入 | (value) => void | - | |
+### range
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | 4.10.0 |
+
## 方法
| 名称 | 描述 | 版本 |
diff --git a/package.json b/package.json
index b1570de9ed..a4811643e9 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,7 @@
"rc-rate": "~2.9.0",
"rc-resize-observer": "^1.0.0",
"rc-select": "~12.0.0",
- "rc-slider": "~9.6.1",
+ "rc-slider": "~9.7.1",
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.12.0",