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",