Slider: add touch events support (#9320)

packages/slider/src/button.vue

@@ -4,6 +4,7 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @mousedown="onButtonDown"
+    @touchstart="onButtonDown"
     :class="{ 'hover': hovering, 'dragging': dragging }"
     :style="wrapperStyle"
     ref="button"
@@ -135,7 +136,9 @@
         event.preventDefault();
         this.onDragStart(event);
         window.addEventListener('mousemove', this.onDragging);
+        window.addEventListener('touchmove', this.onDragging);
         window.addEventListener('mouseup', this.onDragEnd);
+        window.addEventListener('touchend', this.onDragEnd);
         window.addEventListener('contextmenu', this.onDragEnd);
       },
       onLeftKeyDown() {
@@ -151,6 +154,10 @@
       onDragStart(event) {
         this.dragging = true;
         this.isClick = true;
+        if (event.type === 'touchstart') {
+          event.clientY = event.touches[0].clientY;
+          event.clientX = event.touches[0].clientX;
+        }
         if (this.vertical) {
           this.startY = event.clientY;
         } else {
@@ -166,6 +173,10 @@
           this.displayTooltip();
           this.$parent.resetSize();
           let diff = 0;
+          if (event.type === 'touchmove') {
+            event.clientY = event.touches[0].clientY;
+            event.clientX = event.touches[0].clientX;
+          }
           if (this.vertical) {
             this.currentY = event.clientY;
             diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
@@ -193,7 +204,9 @@
             }
           }, 0);
           window.removeEventListener('mousemove', this.onDragging);
+          window.removeEventListener('touchmove', this.onDragging);
           window.removeEventListener('mouseup', this.onDragEnd);
+          window.removeEventListener('touchend', this.onDragEnd);
           window.removeEventListener('contextmenu', this.onDragEnd);
         }
       },