fix(VSlider): support touch and drag (#13263)

fixes #13259
vuetifyjs · Mar 23, 2021 · 89b55e2 · 89b55e2
1 parent c273acb
commit 89b55e2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts
@@ -192,14 +192,11 @@ export default VSlider.extend({
       const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
       const mouseMoveOptions = passiveSupported ? { passive: true } : false
 
-      if ('touches' in e) {
-        this.app.addEventListener('touchmove', this.onMouseMove, mouseMoveOptions)
-        addOnceEventListener(this.app, 'touchend', this.onSliderMouseUp, mouseUpOptions)
-      } else {
-        this.onMouseMove(e)
-        this.app.addEventListener('mousemove', this.onMouseMove, mouseMoveOptions)
-        addOnceEventListener(this.app, 'mouseup', this.onSliderMouseUp, mouseUpOptions)
-      }
+      const isTouchEvent = 'touches' in e
+
+      this.onMouseMove(e)
+      this.app.addEventListener(isTouchEvent ? 'touchmove' : 'mousemove', this.onMouseMove, mouseMoveOptions)
+      addOnceEventListener(this.app, isTouchEvent ? 'touchend' : 'mouseup', this.onSliderMouseUp, mouseUpOptions)
 
       this.$emit('start', this.internalValue)
     },

diff --git a/packages/vuetify/src/components/VSlider/VSlider.ts b/packages/vuetify/src/components/VSlider/VSlider.ts
@@ -265,6 +265,7 @@ export default mixins<options &
         on: {
           click: this.onSliderClick,
           mousedown: this.onSliderMouseDown,
+          touchstart: this.onSliderMouseDown,
         },
       }, this.genChildren())
     },
@@ -465,14 +466,11 @@ export default mixins<options &
         }, 300)
       }
 
-      if ('touches' in e) {
-        this.app.addEventListener('touchmove', this.onMouseMove, mouseMoveOptions)
-        addOnceEventListener(this.app, 'touchend', this.onSliderMouseUp, mouseUpOptions)
-      } else {
-        this.onMouseMove(e)
-        this.app.addEventListener('mousemove', this.onMouseMove, mouseMoveOptions)
-        addOnceEventListener(this.app, 'mouseup', this.onSliderMouseUp, mouseUpOptions)
-      }
+      const isTouchEvent = 'touches' in e
+
+      this.onMouseMove(e)
+      this.app.addEventListener(isTouchEvent ? 'touchmove' : 'mousemove', this.onMouseMove, mouseMoveOptions)
+      addOnceEventListener(this.app, isTouchEvent ? 'touchend' : 'mouseup', this.onSliderMouseUp, mouseUpOptions)
 
       this.$emit('start', this.internalValue)
     },

diff --git a/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.ts b/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.ts
@@ -294,14 +294,19 @@ describe('VSlider.ts', () => {
     expect(wrapper.vm.thumbPressed).toBe(false)
     expect(wrapper.vm.isActive).toBe(false)
 
-    container.trigger('mousedown', {
-      touches: [],
+    container.trigger('touchstart', {
+      touches: [{}],
     })
 
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.thumbPressed).toBe(true)
     expect(wrapper.vm.isActive).toBe(true)
+
+    el.dispatchEvent(new Event('touchend'))
+
+    expect(wrapper.vm.thumbPressed).toBe(false)
+    expect(wrapper.vm.isActive).toBe(false)
   })
 
   it('should return a rounded value', () => {