beam: align zoom slider with engine controls

frontend/src/ui/controls/slider.js

@@ -27,11 +27,30 @@ export function createSliderControl({
   const valueEl = document.createElement("div");
   valueEl.className = "slider-value";
 
+  const fillText = document.createElement("span");
+  fillText.className = "slider-fill-text";
+  fillText.setAttribute("aria-hidden", "true");
+
+  const fillLabel = document.createElement("span");
+  fillLabel.textContent = label;
+  fillLabel.className = "slider-label";
+
+  const fillValue = document.createElement("span");
+  fillValue.className = "slider-value";
+  fillText.appendChild(fillLabel);
+  fillText.appendChild(fillValue);
+
   const updateFill = () => {
-    const percent = ((input.value - input.min) / (input.max - input.min)) * 100;
+    const range = Number(input.max) - Number(input.min);
+    const percent = range
+      ? Math.max(0, Math.min(100, ((Number(input.value) - Number(input.min)) / range) * 100))
+      : 0;
+    row.style.setProperty("--slider-percent", `${percent}%`);
     input.style.setProperty("--slider-percent", `${percent}%`);
     if (showValue) {
-      valueEl.textContent = formatValue(Number(input.value));
+      const formattedValue = formatValue(Number(input.value));
+      valueEl.textContent = formattedValue;
+      fillValue.textContent = formattedValue;
     }
   };
 
@@ -47,6 +66,7 @@ export function createSliderControl({
   row.appendChild(input);
   if (showValue) {
     row.appendChild(valueEl);
+    row.appendChild(fillText);
   }
   row.setValue = (nextValue) => {
     input.value = nextValue;