Revert changes back to 3.1.1

src/components/slider/Slider.vue

@@ -1,12 +1,12 @@
 <template>
     <div :class="containerClass" @click="onBarClick">
         <span class="p-slider-range" :style="rangeStyle"></span>
-        <span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" tabindex="0"
+        <span v-if="!range" class="p-slider-handle" :style="handleStyle" @mousedown="onHandleMouseDown($event)" @keydown="onHandleKeyDown($event)" tabindex="0"
-             role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
+             role="slider" :aria-valuemin="min" aria-valuenow="modelValue" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" tabindex="0"
+        <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @mousedown="onHandleMouseDown($event, 0)" @keydown="onHandleKeyDown($event, 0)" tabindex="0"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
+            role="slider" :aria-valuemin="min" aria-valuenow="modelValue ? modelValue[0] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
-        <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" tabindex="0"
+        <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @mousedown="onHandleMouseDown($event, 1)" @keydown="onHandleKeyDown($event, 1)" tabindex="0"
-            role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
+            role="slider" :aria-valuemin="min" aria-valuenow="modelValue = modelValue[1] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
     </div>
 </template>
 
@@ -53,7 +53,7 @@ export default {
     barWidth: null,
     barHeight: null,
     dragListener: null,
-    dragEndListener: null,
+    mouseupListener: null,
     beforeUnmount() {
         this.unbindDragListeners();
     },
@@ -65,29 +65,36 @@ export default {
             this.barWidth = this.$el.offsetWidth;
             this.barHeight = this.$el.offsetHeight;
         },
-        setValue(event) {
+        setValueFromHandlePosition(event, handlePosition) {
-            let handleValue;
+            let newValue = (this.max - this.min) * (handlePosition / 100) + this.min;
-            let pageX = event.touches ? event.touches[0].pageX : event.pageX;
-            let pageY = event.touches ? event.touches[0].pageY : event.pageY;
 
-            if(this.orientation === 'horizontal')
+            if (this.range) {
-                handleValue = ((pageX - this.initX) * 100) / (this.barWidth);
+                if (this.step)
-            else
+                    this.handleStepChange(event, newValue, this.modelValue[this.handleIndex]);
-                handleValue = (((this.initY + this.barHeight) - pageY) * 100) / (this.barHeight);
+                else
-                
+                    this.updateModel(event, newValue);
-            
-            let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
-
-            if (this.step) {
-                const oldValue = this.range ? this.value[this.handleIndex] : this.value;
-                const diff = (newValue - oldValue);
-                if (diff < 0)
-                    newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
-                else if (diff > 0)
-                    newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
             }
+            else {
+                if (this.step)
+                    this.handleStepChange(event, newValue, this.modelValue);
+                else
+                    this.updateModel(event, newValue);
+            }
+        },
+        onSlide(event) {
+            let handlePosition = this.horizontal ? ((event.pageX - this.initX) * 100) / (this.barWidth) : (((this.initY + this.barHeight) - event.pageY) * 100) / (this.barHeight);
+            this.setValueFromHandlePosition(event, handlePosition);
+        },
+        handleStepChange(event, newValue, oldValue) {
+            let diff = (newValue - oldValue);
+            let val = oldValue;
 
-            this.updateModel(event, newValue);
+            if (diff < 0)
+                val = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
+            else if (diff > 0)
+                val = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
+
+            this.updateModel(event, val);
         },
         updateModel(event, value) {
             let newValue = value;
@@ -122,7 +129,17 @@ export default {
             this.$emit('update:modelValue', modelValue);
             this.$emit('change', modelValue);
         },
-        onDragStart(event, index) {
+        onBarClick(event) {
+            if (this.disabled) {
+                return;
+            }
+
+            if (!DomHandler.hasClass(event.target, 'p-slider-handle')) {
+                this.updateDomData();
+                this.onSlide(event);
+            }
+        },
+        onHandleMouseDown(event, index) {
             if (this.disabled) {
                 return;
             }
@@ -132,37 +149,10 @@ export default {
             this.dragging = true;
             this.updateDomData();
             this.handleIndex = index;
+            this.bindDragListeners();
             event.preventDefault();
         },
-        onDrag(event) {
+        onHandleKeyDown(event, index) {
-            if (this.dragging) {
-                this.setValue(event);
-                event.preventDefault();
-            }
-        },
-        onDragEnd(event) {
-            if (this.dragging) {
-                this.dragging = false;
-
-                DomHandler.removeClass(this.$el, 'p-slider-sliding');
-                this.$emit('slideend', {originalEvent: event, value: this.value});
-            }
-        },
-        onBarClick(event) {
-            if (this.disabled) {
-                return;
-            }
-
-            if (!DomHandler.hasClass(event.target, 'p-slider-handle')) {
-                this.updateDomData();
-                this.setValue(event);
-            }
-        },
-        onMouseDown(event, index) {
-            this.bindDragListeners();
-            this.onDragStart(event, index);
-        },
-        onKeyDown(event, index) {
             this.handleIndex = index;
 
             switch (event.which) {
@@ -244,13 +234,23 @@ export default {
         },
         bindDragListeners() {
              if (!this.dragListener) {
-                this.dragListener = this.onDrag.bind(this);
+                this.dragListener = (event) => {
+                    if (this.dragging) {
+                        this.onSlide(event);
+                    }
+                };
 
                 document.addEventListener('mousemove', this.dragListener);
             }
 
             if (!this.mouseupListener) {
-                this.dragEndListener = this.onDragEnd.bind(this);
+                this.mouseupListener = (event) => {
+                    if (this.dragging) {
+                        this.dragging = false;
+                        DomHandler.removeClass(this.$el, 'p-slider-sliding');
+                        this.$emit('slideend', {originalEvent: event, values: this.modelValue});
+                    }
+                };
 
                 document.addEventListener('mouseup', this.mouseupListener);
             }
@@ -261,9 +261,9 @@ export default {
                 this.dragListener = null;
             }
 
-            if (this.dragEndListener) {
+            if (this.mouseupListener) {
-                document.removeEventListener('mouseup', this.dragEndListener);
+                document.removeEventListener('mouseup', this.mouseupListener);
-                this.dragEndListener = null;
+                this.mouseupListener = null;
             }
         }
     },