feat: Enhance Supertonic voice mixer controls with range inputs and display labels

abogen/web/static/styles.css

@@ -262,6 +262,11 @@ body {
   display: none !important;
 }
 
+/* Ensure the HTML hidden attribute always wins over component display rules. */
+[hidden] {
+  display: none !important;
+}
+
 .modal__overlay {
   position: absolute;
   inset: 0;

abogen/web/static/voices.js

@@ -31,6 +31,8 @@ const setupVoiceMixer = () => {
   const supertonicVoiceSelect = app.querySelector('[data-role="supertonic-voice"]');
   const supertonicStepsInput = app.querySelector('[data-role="supertonic-steps"]');
   const supertonicSpeedInput = app.querySelector('[data-role="supertonic-speed"]');
+  const supertonicStepsLabel = app.querySelector('[data-role="supertonic-steps-display"]');
+  const supertonicSpeedLabel = app.querySelector('[data-role="supertonic-speed-display"]');
   const speedInput = document.getElementById("preview-speed");
   const importInput = document.getElementById("voice-import-input");
   const headerActions = document.querySelector(".voice-mixer__header-actions");
@@ -290,6 +292,7 @@ const setupVoiceMixer = () => {
       const desired = Number(state.draft.supertonic?.speed ?? 1.0);
       if (!Number.isNaN(desired)) {
         speedInput.value = String(desired);
+        setRangeFill(speedInput);
       }
     }
   };
@@ -591,9 +594,18 @@ const setupVoiceMixer = () => {
     }
     if (supertonicStepsInput) {
       supertonicStepsInput.value = String(state.draft.supertonic?.total_steps ?? 5);
+      setRangeFill(supertonicStepsInput);
     }
     if (supertonicSpeedInput) {
       supertonicSpeedInput.value = String(state.draft.supertonic?.speed ?? 1.0);
+      setRangeFill(supertonicSpeedInput);
+    }
+    if (supertonicStepsLabel) {
+      supertonicStepsLabel.textContent = String(state.draft.supertonic?.total_steps ?? 5);
+    }
+    if (supertonicSpeedLabel) {
+      const speed = Number(state.draft.supertonic?.speed ?? 1.0);
+      supertonicSpeedLabel.textContent = `${(Number.isFinite(speed) ? speed : 1.0).toFixed(2)}×`;
     }
     applyProviderToUI();
     renderSelectedVoices();
@@ -1016,8 +1028,13 @@ const setupVoiceMixer = () => {
       const value = Number(supertonicStepsInput.value || "5");
       state.draft.supertonic.total_steps = clamp(value, 2, 15);
       supertonicStepsInput.value = String(Math.round(state.draft.supertonic.total_steps));
+      if (supertonicStepsLabel) {
+        supertonicStepsLabel.textContent = supertonicStepsInput.value;
+      }
+      setRangeFill(supertonicStepsInput);
       markDirty();
     });
+    setRangeFill(supertonicStepsInput);
   }
 
   if (supertonicSpeedInput) {
@@ -1026,11 +1043,17 @@ const setupVoiceMixer = () => {
       const normalized = clamp(value, 0.7, 2.0);
       state.draft.supertonic.speed = normalized;
       supertonicSpeedInput.value = normalized.toFixed(2);
+      if (supertonicSpeedLabel) {
+        supertonicSpeedLabel.textContent = `${normalized.toFixed(2)}×`;
+      }
+      setRangeFill(supertonicSpeedInput);
       if (speedInput) {
         speedInput.value = String(normalized);
+        setRangeFill(speedInput);
       }
       markDirty();
     });
+    setRangeFill(supertonicSpeedInput);
   }
 
   if (voiceFilterSelect) {
@@ -1052,6 +1075,10 @@ const setupVoiceMixer = () => {
         state.draft.supertonic.speed = clamp(speed, 0.7, 2.0);
         if (supertonicSpeedInput) {
           supertonicSpeedInput.value = state.draft.supertonic.speed.toFixed(2);
+          setRangeFill(supertonicSpeedInput);
+        }
+        if (supertonicSpeedLabel) {
+          supertonicSpeedLabel.textContent = `${state.draft.supertonic.speed.toFixed(2)}×`;
         }
       }
     };

abogen/web/templates/voices.html

@@ -73,14 +73,14 @@
                 {% endfor %}
               </select>
             </div>
-            <div class="field">
+            <div class="field field--slider">
-              <label for="supertonic-quality">Supertonic quality (total steps)</label>
+              <label for="supertonic-quality">Supertonic quality (total steps) <span class="tag" data-role="supertonic-steps-display">5</span></label>
-              <input type="number" id="supertonic-quality" data-role="supertonic-steps" min="2" max="15" value="5">
+              <input type="range" id="supertonic-quality" data-role="supertonic-steps" min="2" max="15" step="1" value="5">
               <p class="hint">2 = fastest/lowest quality, 15 = slowest/highest quality.</p>
             </div>
-            <div class="field">
+            <div class="field field--slider">
-              <label for="supertonic-speaker-speed">Supertonic speed</label>
+              <label for="supertonic-speaker-speed">Supertonic speed <span class="tag" data-role="supertonic-speed-display">1.00×</span></label>
-              <input type="number" id="supertonic-speaker-speed" data-role="supertonic-speed" min="0.7" max="2.0" step="0.05" value="1.0">
+              <input type="range" id="supertonic-speaker-speed" data-role="supertonic-speed" min="0.7" max="2.0" step="0.05" value="1.0">
             </div>
             <p class="hint">Supertonic voice mixing is not implemented yet. Stub target: <a href="https://github.com/Topping1/Supertonic-Voice-Mixer" target="_blank" rel="noreferrer">Supertonic-Voice-Mixer</a>.</p>
           </div>