beam: add zoom speed control

frontend/src/ui/controls/slider.js

@@ -1,6 +1,16 @@
-export function createSliderControl({ label = "", value = 0, min = 0, max = 100, step = 1, onChange }) {
+export function createSliderControl({
+  label = "",
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  className = "",
+  showValue = false,
+  formatValue = (val) => String(val),
+  onChange
+}) {
   const row = document.createElement("div");
-  row.className = "slider-row";
+  row.className = ["slider-row", className].filter(Boolean).join(" ");
 
   const lbl = document.createElement("label");
   lbl.textContent = label;
@@ -14,9 +24,15 @@ export function createSliderControl({ label = "", value = 0, min = 0, max = 100,
   input.step = step;
   input.value = value;
 
+  const valueEl = document.createElement("div");
+  valueEl.className = "slider-value";
+
   const updateFill = () => {
     const percent = ((input.value - input.min) / (input.max - input.min)) * 100;
     input.style.setProperty("--slider-percent", `${percent}%`);
+    if (showValue) {
+      valueEl.textContent = formatValue(Number(input.value));
+    }
   };
 
   input.addEventListener("input", () => {
@@ -29,5 +45,13 @@ export function createSliderControl({ label = "", value = 0, min = 0, max = 100,
 
   row.appendChild(lbl);
   row.appendChild(input);
+  if (showValue) {
+    row.appendChild(valueEl);
+  }
+  row.setValue = (nextValue) => {
+    input.value = nextValue;
+    updateFill();
+  };
+  row.getValue = () => Number(input.value);
   return row;
 }