From 7c66fc8933906f1f0767f93c05b88bbac2573a2d Mon Sep 17 00:00:00 2001
From: mazino <ewomaukah@yahoo.com>
Date: Sat, 31 Jul 2021 20:11:24 +0100
Subject: [PATCH] Add ablilty to prevent handles overlap

---
 src/lib/HistogramSlider.vue | 21 +++++++++++++++++++++
 src/lib/props.js            |  4 ++++
 2 files changed, 25 insertions(+)

diff --git a/src/lib/HistogramSlider.vue b/src/lib/HistogramSlider.vue
index f084568..d77e2c2 100644
--- a/src/lib/HistogramSlider.vue
+++ b/src/lib/HistogramSlider.vue
@@ -60,6 +60,24 @@ export default {
         this.ionRangeSlider.update({ from, to })
         this.updateBarColor({ from, to })
       }
+    },
+    preventOverlap(e) {
+      const fromHandle = this.$el.querySelector('.irs-handle.from')
+      const toHandle = this.$el.querySelector('.irs-handle.to')
+      const handleSize = this.handleSize
+      const fromHandleLeftPosition = fromHandle.offsetLeft
+      const toHandleLeftPosition = toHandle.offsetLeft
+
+      if (fromHandleLeftPosition + handleSize <= toHandleLeftPosition) {
+        this.lastSliderHandleFromVal = e.from
+        this.lastSliderHandleToVal = e.to
+      } else {
+        this.update({
+          from: this.lastSliderHandleFromVal,
+          to: this.lastSliderHandleToVal
+        })
+        this.$emit('change', e)
+      }
     }
   },
 
@@ -192,6 +210,9 @@ export default {
           if (this.updateColorOnChange) {
             this.updateBarColor(val)
           }
+          if (this.preventHandlesOverlap) {
+            return this.preventOverlap(val)
+          }
           this.$emit('change', val)
         }
       })
diff --git a/src/lib/props.js b/src/lib/props.js
index f83db58..ab4fc1c 100644
--- a/src/lib/props.js
+++ b/src/lib/props.js
@@ -17,6 +17,10 @@ export default {
     type: Boolean,
     default: false
   },
+  preventHandlesOverlap: {
+    type: Boolean,
+    default: false
+  },
   grid: {
     type: Boolean,
     default: true