fix(VSlider): keep initial offset from thumb centre when dragging

If you start dragging inside the thumb touch target, it shouldn't snap
to be centred on the cursor.

Author: KaelWD

packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts

@@ -172,7 +172,7 @@ export default VSlider.extend({
       const thumbRef = this.$refs[refName] as HTMLElement
       thumbRef.focus()
     },
-    onSliderMouseDown (e: MouseEvent) {
+    onSliderMouseDown (e: MouseEvent | TouchEvent) {
       const value = this.parseMouseMove(e)
 
       this.reevaluateSelected(value)
@@ -182,7 +182,13 @@ export default VSlider.extend({
 
       if ((e.target as Element)?.matches('.v-slider__thumb-container, .v-slider__thumb-container *')) {
         this.thumbPressed = true
+        const domRect = (e.target as Element).getBoundingClientRect()
+        const touch = 'touches' in e ? e.touches[0] : e
+        this.startOffset = this.vertical
+          ? touch.clientY - (domRect.top + domRect.height / 2)
+          : touch.clientX - (domRect.left + domRect.width / 2)
       } else {
+        this.startOffset = 0
         window.clearTimeout(this.mouseTimeout)
         this.mouseTimeout = window.setTimeout(() => {
           this.thumbPressed = true
@@ -216,7 +222,7 @@ export default VSlider.extend({
         this.$emit('change', this.internalValue)
       }
     },
-    onMouseMove (e: MouseEvent) {
+    onMouseMove (e: MouseEvent | TouchEvent) {
       const value = this.parseMouseMove(e)
 
       if (e.type === 'mousemove') {

packages/vuetify/src/components/VSlider/VSlider.ts

@@ -98,6 +98,7 @@ export default mixins<options &
     isFocused: false,
     isActive: false,
     noClick: false, // Prevent click event if dragging took place, hack for #7915
+    startOffset: 0,
   }),
 
   computed: {
@@ -448,24 +449,30 @@ export default mixins<options &
         [direction]: `${value}%`,
       }
     },
-    onSliderMouseDown (e: MouseEvent) {
+    onSliderMouseDown (e: MouseEvent | TouchEvent) {
       e.preventDefault()
 
       this.oldValue = this.internalValue
       this.isActive = true
 
-      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
-      const mouseMoveOptions = passiveSupported ? { passive: true } : false
-
       if ((e.target as Element)?.matches('.v-slider__thumb-container, .v-slider__thumb-container *')) {
         this.thumbPressed = true
+        const domRect = (e.target as Element).getBoundingClientRect()
+        const touch = 'touches' in e ? e.touches[0] : e
+        this.startOffset = this.vertical
+          ? touch.clientY - (domRect.top + domRect.height / 2)
+          : touch.clientX - (domRect.left + domRect.width / 2)
       } else {
+        this.startOffset = 0
         window.clearTimeout(this.mouseTimeout)
         this.mouseTimeout = window.setTimeout(() => {
           this.thumbPressed = true
         }, 300)
       }
 
+      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
+      const mouseMoveOptions = passiveSupported ? { passive: true } : false
+
       const isTouchEvent = 'touches' in e
 
       this.onMouseMove(e)
@@ -491,7 +498,7 @@ export default mixins<options &
 
       this.isActive = false
     },
-    onMouseMove (e: MouseEvent) {
+    onMouseMove (e: MouseEvent | TouchEvent) {
       if (e.type === 'mousemove') {
         this.thumbPressed = true
       }
@@ -532,19 +539,19 @@ export default mixins<options &
 
       this.$emit('focus', e)
     },
-    parseMouseMove (e: MouseEvent) {
+    parseMouseMove (e: MouseEvent | TouchEvent) {
       const start = this.vertical ? 'top' : 'left'
       const length = this.vertical ? 'height' : 'width'
       const click = this.vertical ? 'clientY' : 'clientX'
 
       const {
         [start]: trackStart,
         [length]: trackLength,
-      } = this.$refs.track.getBoundingClientRect() as any
-      const clickOffset = 'touches' in e ? (e as any).touches[0][click] : e[click] // Can we get rid of any here?
+      } = this.$refs.track.getBoundingClientRect()
+      const clickOffset = 'touches' in e ? e.touches[0][click] : e[click]
 
       // It is possible for left to be NaN, force to number
-      let clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0
+      let clickPos = Math.min(Math.max((clickOffset - trackStart - this.startOffset) / trackLength, 0), 1) || 0
 
       if (this.vertical) clickPos = 1 - clickPos
       if (this.$vuetify.rtl) clickPos = 1 - clickPos