feat(🆕): Slider supports range.draggableTrack (#28592)

close #25517

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -83,6 +83,46 @@ Array [
 ]
 `;
 
+exports[`renders ./components/slider/demo/dragableTrack.md correctly 1`] = `
+<div
+  class="ant-slider"
+>
+  <div
+    class="ant-slider-rail"
+  />
+  <div
+    class="ant-slider-track ant-slider-track-1"
+    style="left:20%;right:auto;width:30%"
+  />
+  <div
+    class="ant-slider-step"
+  />
+  <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="20"
+    class="ant-slider-handle ant-slider-handle-1"
+    role="slider"
+    style="left:20%;right:auto;transform:translateX(-50%)"
+    tabindex="0"
+  />
+  <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="ant-slider-handle ant-slider-handle-2"
+    role="slider"
+    style="left:50%;right:auto;transform:translateX(-50%)"
+    tabindex="0"
+  />
+  <div
+    class="ant-slider-mark"
+  />
+</div>
+`;
+
 exports[`renders ./components/slider/demo/event.md correctly 1`] = `
 Array [
   <div

components/slider/demo/dragableTrack.md

@@ -0,0 +1,20 @@
+---
+order: 9
+title:
+  zh-CN: 范围可拖拽
+  en-US: Draggable track
+---
+
+## zh-CN
+
+可以设置 `range.draggableTrack`，使得范围刻度整体可拖拽。
+
+## en-US
+
+Make range track draggable when set `range.draggableTrack`.
+
+```jsx
+import { Slider } from 'antd';
+
+ReactDOM.render(<Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />, mountNode);
+```

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 |

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<unknown, SliderSingleProps | SliderRangeProps>(
@@ -136,15 +140,24 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
     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 (
         <RcRange
           {...(restProps as SliderRangeProps)}
           step={restProps.step!}
+          draggableTrack={draggableTrack}
           className={cls}
           ref={ref}
           handle={(info: HandleGeneratorInfo) =>

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 |
+
 ## 方法
 
 | 名称    | 描述     | 版本 |

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