From 53e580cd9e07e5d768948f94420448d4069a13e1 Mon Sep 17 00:00:00 2001
From: cvanelteren <caspervanelteren@gmail.com>
Date: Fri, 21 Aug 2026 09:35:36 +1000
Subject: [PATCH] chore: update the js to allow grabbing the selector

---
 docs/_static/custom.css | 20 ++++++++++++++++----
 docs/_static/custom.js  | 28 ++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 8a3e8a679..97d0d871f 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -1377,17 +1377,29 @@ body.wy-body-for-nav
     height: 100%;
     background: var(--uplt-color-text-secondary);
     opacity: 0.95;
-    pointer-events: none;
+    pointer-events: all;
+    cursor: ew-resize;
     z-index: 3;
 }
 
+.uplt-compare-frame .uplt-compare-handle::after {
+    content: "";
+    position: absolute;
+    inset: 0 -8px;
+    width: 16px;
+}
+
 .uplt-compare-slider {
-    display: block;
-    width: 100%;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    opacity: 0;
+    overflow: hidden;
 }
 
 .uplt-compare-slider input[type="range"] {
-    width: 100%;
+    width: 1px;
     margin: 0;
 }
 
diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index bb350612c..88745cf9b 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -129,6 +129,34 @@ function initWhyCompareSliders() {
     sliderInput.addEventListener("input", onInput);
     onInput();
 
+    const moveHandle = (clientX) => {
+      const rect = frame.getBoundingClientRect();
+      if (!rect.width) return;
+      const ratio = (clientX - rect.left) / rect.width;
+      const clamped = Math.max(0, Math.min(1, ratio));
+      sliderInput.value = `${Math.round(clamped * 100)}`;
+      onInput();
+    };
+
+    handle.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      handle.setPointerCapture?.(event.pointerId);
+      moveHandle(event.clientX);
+
+      const onPointerMove = (moveEvent) => {
+        moveHandle(moveEvent.clientX);
+      };
+      const onPointerUp = () => {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointercancel", onPointerUp);
+      };
+
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp, { once: true });
+      window.addEventListener("pointercancel", onPointerUp, { once: true });
+    });
+
     body.appendChild(frame);
     body.appendChild(sliderInput);