feat: swap handle when they overlap

__tests__/integration/components/slider/index.ts

@@ -16,3 +16,4 @@ export { Handle2 } from './handle-2';
 export { HandleUpdate } from './handle-update';
 export { SliderValueType } from './slider-value-type';
 export { SliderTimebar } from './slider-timebar';
+export { SliderSwapHandle } from './slider-swap-handle';

__tests__/integration/components/slider/slider-swap-handle.ts

@@ -0,0 +1,23 @@
+import { Group } from '@antv/g';
+import { Slider } from '../../../../src/ui/slider';
+
+export const SliderSwapHandle = () => {
+  const group = new Group();
+
+  group.appendChild(
+    new Slider({
+      style: {
+        x: 10,
+        y: 10,
+        trackLength: 300,
+        trackSize: 50,
+        values: [0.25, 0.75],
+        enableHandleSwap: true,
+      },
+    })
+  );
+
+  return group;
+};
+
+SliderSwapHandle.tags = ['缩略条', '左右手柄可交换位置'];

docs/components/slider.md

@@ -18,6 +18,7 @@ import { Slider } from '@antv/component';
 | brushable          | `boolean`                            | 是否支持刷选                                         | `true`       |
 | slidable           | `boolean`                            | 是否支持拖动                                         | `true`       |
 | scrollable         | `boolean`                            | 是否支持滚动                                         | `true`       |
+| enableHandleSwap   | `boolean`                            | 左右滑块可交换位置                                    | `false`      |
 | padding            | `number` | `number[]`           | 内边距                                               | `0`          |
 | `selection{Style}` | `StyleProps`                         | 选区样式                                             | `-`          |
 | selectionType    | `select` | `invert`             | 选区类型，中间选取/两端反选                          |              |

src/ui/slider/index.ts

@@ -567,21 +567,35 @@ export class Slider extends Component<SliderStyleProps> {
   };
 
   private onDragging = (e: any) => {
-    const { slidable, brushable, type } = this.attributes;
+    const { slidable, brushable, type, enableHandleSwap } = this.attributes;
     e.stopPropagation();
 
     const currPos = this.getOrientVal(getEventPos(e));
     const diffPos = currPos - this.prevPos;
 
     if (!diffPos) return;
     const deltaVal = this.getRatio(diffPos);
-
+    const [startVal, endVal] = this.getValues() || [];
     switch (this.target) {
       case 'start':
-        if (slidable) this.setValuesOffset(deltaVal);
+        if (slidable) {
+          if (enableHandleSwap && startVal + deltaVal >= endVal) {
+            this.setValuesOffset(endVal - startVal, 0);
+            this.target = 'end';
+          } else {
+            this.setValuesOffset(deltaVal);
+          }
+        }
         break;
       case 'end':
-        if (slidable) this.setValuesOffset(0, deltaVal);
+        if (slidable) {
+          if (enableHandleSwap && endVal + deltaVal <= startVal) {
+            this.setValuesOffset(0, startVal - endVal);
+            this.target = 'start';
+          } else {
+            this.setValuesOffset(0, deltaVal);
+          }
+        }
         break;
       case 'selection':
         if (slidable) this.setValuesOffset(deltaVal, deltaVal);

src/ui/slider/types.ts

@@ -56,6 +56,9 @@ export type SliderStyleProps = GroupStyleProps &
     /** 是否可滑动 */
     slidable?: boolean;
 
+    /** 左右滑块可交换位置 */
+    enableHandleSwap?: boolean;
+
     /** 轨道长度 */
     trackLength?: number;