add volume slider next to music toggle

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

1 files changed, 11 insertions, 2 deletions

diff --git a/index.html b/index.html
index a71ed89..287fef9 100755
--- a/index.html
+++ b/index.html
@@ -351,17 +351,26 @@
     });
   });
 
-  // music toggle
+  // music toggle + volume slider
   document.getElementById('mt').innerHTML = Aero.musicToggleHTML();
   const mtDiv = document.getElementById('mt');
   const mtBtn = mtDiv.querySelector('.mt-btn');
   const mtLabel = mtDiv.querySelector('.mt-label');
   const bgm = document.getElementById('bgm');
+  bgm.volume = 0.2;
+
+  const vol = document.createElement('input');
+  vol.type = 'range'; vol.min = '0'; vol.max = '1'; vol.step = '0.01'; vol.value = '0.2';
+  vol.className = 'no-drag aero-vol';
+  vol.title = 'volume';
+  vol.style.cssText = 'width:70px;margin-left:6px;cursor:pointer;accent-color:oklch(55% 0.13 230);vertical-align:middle;';
+  mtDiv.querySelector('.music-toggle').appendChild(vol);
+  vol.addEventListener('input', () => { bgm.volume = Number(vol.value); });
+
   let musicOn = false;
   mtBtn.addEventListener('click', () => {
     musicOn = !musicOn;
     if (musicOn) {
-      bgm.volume = 0.2;
       bgm.play();
       mtBtn.textContent = '❚❚';
       mtLabel.textContent = '♪ a-dog — bazaar theme';