From e8381981d376c4f84650ec46521d4b5f7e1a6bd7 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Sun, 12 Sep 2021 20:18:24 +0100
Subject: [PATCH] improve double slider hit spot

---
 src/component/control/sliderDouble/index.js | 39 ++++++++++++++++++---
 src/component/form/input/range/index.css    | 10 +-----
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/component/control/sliderDouble/index.js b/src/component/control/sliderDouble/index.js
index 067ceefb..517ef15f 100644
--- a/src/component/control/sliderDouble/index.js
+++ b/src/component/control/sliderDouble/index.js
@@ -58,11 +58,29 @@ export const Control_sliderDouble = function({
   }
 } = {}) {
 
+  this.element = {
+    sliderDouble: node('div|class:slider-double')
+  };
+
   this.label = form.label({
     forInput: left.id,
     text: labelText
   });
 
+  this.rightClip = () => {
+
+    let rightClipPostion = ((this.range.right.value() - this.range.left.value()) / 2) + this.range.left.value();
+
+    if (this.range.right.value() < (right.max / 2)) {
+      rightClipPostion = rightClipPostion + 1;
+    } else {
+      rightClipPostion = rightClipPostion - 1;
+    };
+
+    this.element.sliderDouble.style.setProperty('--slider-double-right-clip', rightClipPostion);
+
+  };
+
   this.range = {
     left: new Control_slider({
       object: object,
@@ -89,6 +107,8 @@ export const Control_sliderDouble = function({
 
         this.range.right.update();
 
+        this.rightClip();
+
         if (left.action) {
           left.action();
         };
@@ -127,6 +147,8 @@ export const Control_sliderDouble = function({
 
         this.range.right.updateRange();
 
+        this.rightClip();
+
         if (right.action) {
           right.action();
         };
@@ -169,10 +191,7 @@ export const Control_sliderDouble = function({
         form.wrap({
           children: [
             this.label,
-            node('div|class:slider-double', [
-              this.range.left.range,
-              this.range.right.range
-            ])
+            this.element.sliderDouble,
           ]
         }),
         form.wrap({
@@ -190,6 +209,18 @@ export const Control_sliderDouble = function({
       ]
     });
 
+    this.assemble = () => {
+
+      this.element.sliderDouble.appendChild(this.range.left.range);
+
+      this.element.sliderDouble.appendChild(this.range.right.range);
+
+      this.rightClip();
+
+    };
+
+    this.assemble();
+
     return wrap;
 
   };
diff --git a/src/component/form/input/range/index.css b/src/component/form/input/range/index.css
index 24c71150..5f1f1589 100644
--- a/src/component/form/input/range/index.css
+++ b/src/component/form/input/range/index.css
@@ -189,15 +189,7 @@ input[type="range"]:disabled.input-range-hue-spectrum::-moz-range-track {
   top: 0;
   left: 0;
   width: 100%;
-  pointer-events: none;
-}
-
-.slider-double input[type="range"]:last-child::-webkit-slider-thumb {
-  pointer-events: all;
-}
-
-.slider-double input[type="range"]:last-child::-moz-range-thumb {
-  pointer-events: all;
+  clip-path: polygon(calc(var(--slider-double-right-clip) * 1%) 0%, calc(100% + 2em) 0%, calc(100% + 2em) 100%, calc(var(--slider-double-right-clip) * 1%) 100%);
 }
 
 .slider-double input[type="range"]:last-child::-webkit-slider-runnable-track,