[bugfix] - make the sliders look nicer.HEADmain

1 files changed, 31 insertions, 0 deletions

diff --git a/controller_webpage/index.html b/controller_webpage/index.html
index 9754759..7af0439 100644
--- a/controller_webpage/index.html
+++ b/controller_webpage/index.html
@@ -116,6 +116,15 @@
       width: 100%;
     }
 
+    .fraction-field {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    input[type="range"] {
+      width: 100%;
+    }
+
     input[type="number"],
     input[type="text"] {
       flex: 1;
@@ -254,6 +263,15 @@
         field.appendChild(colorInput);
         field.appendChild(textInput);
       } else if (value.type === "fraction" || value.type === "ratio") {
+        field.classList.add("fraction-field");
+        const slider = document.createElement("input");
+        slider.type = "range";
+        slider.step = "0.01";
+        slider.min = "0";
+        slider.max = value.type === "fraction" ? "1" : "2.5";
+        slider.value = fmt(value.value);
+        field.appendChild(slider);
+
         const input = document.createElement("input");
         input.type = "number";
         input.step = "0.01";
@@ -265,6 +283,16 @@
         input.value = fmt(value.value);
         field.appendChild(input);
 
+        slider.oninput = () => {
+          input.value = fmt(slider.value);
+        };
+        slider.onchange = () => {
+          sendRequest(attr, "set", fmt(slider.value));
+        };
+        input.oninput = () => {
+          slider.value = input.value;
+        };
+
         const actions = document.createElement("div");
         actions.className = "actions";
 
@@ -355,6 +383,9 @@
                   ? fmt(value.value)
                   : value.value;
             el.value = newVal;
+            if ((value.type === "fraction" || value.type === "ratio") && el.previousElementSibling && el.previousElementSibling.type === "range") {
+              el.previousElementSibling.value = newVal;
+            }
             if (value.type === "color" && el.nextElementSibling) {
               el.nextElementSibling.value = newVal;
             }