From b1d294f4b683c4270d4c1c65662a6ce4560381cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mattias=20Si=C3=B8=20Fjellvang?=
 <mf@Mattiass-MacBook-Pro.local>
Date: Sat, 12 Dec 2020 15:49:34 +0100
Subject: [PATCH] now emits drag start/end events

---
 src/RangeSlider.vue | 141 ++++++++++++++++++++++++++------------------
 1 file changed, 82 insertions(+), 59 deletions(-)

diff --git a/src/RangeSlider.vue b/src/RangeSlider.vue
index 60f34ba..76eb2dd 100644
--- a/src/RangeSlider.vue
+++ b/src/RangeSlider.vue
@@ -4,12 +4,26 @@
       v-bind:disabled="disabled"
       @dragstart="dragStart"
       @drag="drag"
-      @dragend="dragEnd">
+      @dragend="dragEnd"
+    >
       <span ref="inner" class="range-slider-inner">
-        <input class="range-slider-hidden" type="text" :name="name" :value="actualValue" :disabled="disabled">
+        <input
+          class="range-slider-hidden"
+          type="text"
+          :name="name"
+          :value="actualValue"
+          :disabled="disabled"
+        />
         <span class="range-slider-rail"></span>
-        <span class="range-slider-fill" :style="{ width: valuePercent + '%' }"></span>
-        <span class="range-slider-knob" ref="knob" :style="{ left: valuePercent + '%' }">
+        <span
+          class="range-slider-fill"
+          :style="{ width: valuePercent + '%' }"
+        ></span>
+        <span
+          class="range-slider-knob"
+          ref="knob"
+          :style="{ left: valuePercent + '%' }"
+        >
           <slot name="knob"></slot>
         </span>
       </span>
@@ -20,8 +34,8 @@
 <script>
 // @flow
 
-import DragHelper from './DragHelper'
-import { round } from './utils'
+import DragHelper from "./DragHelper";
+import { round } from "./utils";
 
 export default {
   props: {
@@ -29,123 +43,132 @@ export default {
     value: [String, Number],
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     min: {
       type: [String, Number],
-      default: 0
+      default: 0,
     },
     max: {
       type: [String, Number],
-      default: 100
+      default: 100,
     },
     step: {
       type: [String, Number],
-      default: 1
-    }
+      default: 1,
+    },
   },
 
-  data () {
+  data() {
     return {
       actualValue: null,
-      dragStartValue: null
-    }
+      dragStartValue: null,
+    };
   },
 
-  created () {
-    const { _min: min, _max: max } = this
-    let defaultValue = Number(this.value)
+  created() {
+    const { _min: min, _max: max } = this;
+    let defaultValue = Number(this.value);
 
     if (this.value == null || isNaN(defaultValue)) {
       if (min > max) {
-        defaultValue = min
+        defaultValue = min;
       } else {
-        defaultValue = (min + max) / 2
+        defaultValue = (min + max) / 2;
       }
     }
 
-    this.actualValue = this.round(defaultValue)
+    this.actualValue = this.round(defaultValue);
   },
 
   computed: {
-    _min () {
-      return Number(this.min)
+    _min() {
+      return Number(this.min);
     },
 
-    _max () {
-      return Number(this.max)
+    _max() {
+      return Number(this.max);
     },
 
-    _step () {
-      return Number(this.step)
+    _step() {
+      return Number(this.step);
     },
 
-    valuePercent () {
-      return (this.actualValue - this._min) / (this._max - this._min) * 100
-    }
+    valuePercent() {
+      return ((this.actualValue - this._min) / (this._max - this._min)) * 100;
+    },
   },
 
   watch: {
-    value (newValue) {
-      const value = Number(newValue)
+    value(newValue) {
+      const value = Number(newValue);
       if (newValue != null && !isNaN(value)) {
-        this.actualValue = this.round(value)
+        this.actualValue = this.round(value);
       }
     },
-    min () {
-      this.actualValue = this.round(this.actualValue)
+    min() {
+      this.actualValue = this.round(this.actualValue);
+    },
+    max() {
+      this.actualValue = this.round(this.actualValue);
     },
-    max () {
-      this.actualValue = this.round(this.actualValue)
-    }
   },
 
   methods: {
-    dragStart (event: Event, offset: { left: number, top: number }) {
-      this.dragStartValue = this.actualValue
+    dragStart(event: Event, offset: { left: number, top: number }) {
+      this.dragStartValue = this.actualValue;
       if (event.target === this.$refs.knob) {
-        return
+        return;
       }
+
+      this.$emit("drag-start", this.dragStartValue);
+
       // If the click is out of knob, move it to mouse position
-      this.drag(event, offset)
+      this.drag(event, offset);
     },
 
-    drag (event: Event, offset: { left: number, top: number }) {
-      const { offsetWidth } = this.$refs.inner
-      this.actualValue = this.round(this.valueFromBounds(offset.left, offsetWidth))
-      this.emitInput(this.actualValue)
+    drag(event: Event, offset: { left: number, top: number }) {
+      const { offsetWidth } = this.$refs.inner;
+      this.actualValue = this.round(
+        this.valueFromBounds(offset.left, offsetWidth)
+      );
+      this.emitInput(this.actualValue);
     },
 
-    dragEnd (event: Event, offset: { left: number, top: number }) {
-      const { offsetWidth } = this.$refs.inner
-      this.actualValue = this.round(this.valueFromBounds(offset.left, offsetWidth))
+    dragEnd(event: Event, offset: { left: number, top: number }) {
+      const { offsetWidth } = this.$refs.inner;
+      this.actualValue = this.round(
+        this.valueFromBounds(offset.left, offsetWidth)
+      );
 
       if (this.dragStartValue !== this.actualValue) {
-        this.emitChange(this.actualValue)
+        this.emitChange(this.actualValue);
       }
+
+      this.$emit("drag-end", this.actualValue);
     },
 
     emitInput(value) {
-      this.$emit('input', value)
+      this.$emit("input", value);
     },
 
     emitChange(value) {
-      this.$emit('change', value)
+      this.$emit("change", value);
     },
 
-    valueFromBounds (point: number, width: number) {
-      return (point / width) * (this._max - this._min) + this._min
+    valueFromBounds(point: number, width: number) {
+      return (point / width) * (this._max - this._min) + this._min;
     },
 
-    round (value: number): number {
-      return round(value, this._min, this._max, this._step)
-    }
+    round(value: number): number {
+      return round(value, this._min, this._max, this._step);
+    },
   },
 
   components: {
-    DragHelper
-  }
-}
+    DragHelper,
+  },
+};
 </script>
 
 <style lang="scss">