From 3fce3e6af1f447f61ac0f54c8a1aef0a6aa8ba4a Mon Sep 17 00:00:00 2001
From: Marcus Kida <marcus.kida@bearologics.com>
Date: Tue, 10 Feb 2026 01:19:11 +0100
Subject: [PATCH] Use slider for pin radius selection

---
 static/app.js     |  6 +++++-
 static/index.html |  3 ++-
 static/style.css  | 18 +++++++++---------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/static/app.js b/static/app.js
index 91415b7..654bb1c 100644
--- a/static/app.js
+++ b/static/app.js
@@ -49,6 +49,7 @@
     var corridorVal = document.getElementById("corridor-val");
     var pinControlsEl = document.getElementById("pin-controls");
     var pinRadiusInput = document.getElementById("pin-radius");
+    var pinRadiusVal = document.getElementById("pin-radius-val");
     var pinClearBtn = document.getElementById("pin-clear");
     var pinListEl = document.getElementById("pin-list");
 
@@ -816,9 +817,12 @@
 
     pinClearBtn.addEventListener("click", clearPin);
 
+    pinRadiusInput.addEventListener("input", function () {
+        pinRadiusVal.textContent = pinRadiusInput.value;
+        if (pinCircle) pinCircle.setRadius(pinRadiusInput.value * 1000);
+    });
     pinRadiusInput.addEventListener("change", function () {
         if (!pinLatLng) return;
-        if (pinCircle) pinCircle.setRadius(pinRadiusInput.value * 1000);
         fetchPinRepeaters();
     });
 
diff --git a/static/index.html b/static/index.html
index 30c0969..56d8c62 100644
--- a/static/index.html
+++ b/static/index.html
@@ -51,7 +51,8 @@
         <div id="pin-controls" class="pin-controls" style="display:none">
             <div class="controls-row pin-header">
                 <label class="pin-radius-label">Radius
-                    <input type="number" id="pin-radius" value="100" min="1" max="500" step="10" /> km
+                    <input type="range" id="pin-radius" min="10" max="200" value="50" step="10" />
+                    <span id="pin-radius-val">50</span> km
                 </label>
                 <button id="pin-clear" class="pin-clear-btn">Clear pin</button>
             </div>
diff --git a/static/style.css b/static/style.css
index 255f199..3a99e73 100644
--- a/static/style.css
+++ b/static/style.css
@@ -421,18 +421,18 @@ html, body {
     color: var(--text-muted);
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
+    flex: 1;
 }
 
-.pin-radius-label input {
-    width: 52px;
-    padding: 3px 4px;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    font-size: 12px;
+.pin-radius-label input[type="range"] {
+    flex: 1;
+    cursor: pointer;
+}
+
+.pin-radius-label span {
+    min-width: 24px;
     text-align: right;
-    background: var(--input-bg);
-    color: var(--text);
 }
 
 .pin-clear-btn {