fix: Slider bug (#2171)

packages/semi-ui/slider/index.tsx

@@ -95,6 +95,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl: React.RefObject<HTMLSpanElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
+    private handleDownEventListenerSet: Set<() => void>;
     foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
@@ -124,6 +125,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         this.dragging = [false, false];
         this.foundation = new SliderFoundation(this.adapter);
         this.eventListenerSet = new Set();
+        this.handleDownEventListenerSet = new Set()
     }
 
     get adapter(): SliderAdapter {
@@ -204,9 +206,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             getMinHandleEl: () => this.minHanleEl.current,
             getMaxHandleEl: () => this.maxHanleEl.current,
             onHandleDown: (e: React.MouseEvent) => {
-                this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-                this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
-                this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
+                this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false));
+                this.handleDownEventListenerSet.add(this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false));
+                this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false));
             },
             onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false, outPutValue): boolean | void => {
 
@@ -262,8 +264,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this.props.onMouseUp?.(e);
                 e.stopPropagation();
                 e.preventDefault();
-                document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
-                document.body.removeEventListener('mouseup', this.foundation.onHandleUp, false);
+                Array.from(this.handleDownEventListenerSet).forEach((clear) => clear())
+                this.handleDownEventListenerSet.clear()
             },
             onHandleUpAfter: () => {
                 const { currentValue } = this.state;
@@ -358,9 +360,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     onMouseLeave={() => {
                         this.foundation.onHandleLeave();
                     }}
-                    onMouseUp={e => {
-                        this.foundation.onHandleUp(e);
-                    }}
                     onKeyUp={e => {
                         this.foundation.onHandleUp(e);
                     }}
@@ -419,9 +418,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onMouseLeave={() => {
                             this.foundation.onHandleLeave();
                         }}
-                        onMouseUp={e => {
-                            this.foundation.onHandleUp(e);
-                        }}
                         onKeyUp={e => {
                             this.foundation.onHandleUp(e);
                         }}
@@ -475,9 +471,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onMouseLeave={() => {
                             this.foundation.onHandleLeave();
                         }}
-                        onMouseUp={e => {
-                            this.foundation.onHandleUp(e);
-                        }}
                         onKeyUp={e => {
                             this.foundation.onHandleUp(e);
                         }}