音量スライダー(波形アイコン付き)

<div class="volwrap07-06-07">
          <span class="icon07-06-07">🔉</span>
          <div class="track07-06-07">
            <div class="fill07-06-07"></div>
            <div class="handle07-06-07"></div>
          </div>
          <span class="val07-06-07">60%</span>
        </div>

.d07-06-07 .volwrap07-06-07{ display:flex; align-items:center; gap:12px; width:85%; max-width:260px; }
        .d07-06-07 .icon07-06-07{ font-size:18px; width:22px; text-align:center; }
        .d07-06-07 .track07-06-07{ position:relative; flex:1; height:6px; background:#e5e7eb; border-radius:99px; cursor:pointer; }
        .d07-06-07 .fill07-06-07{ position:absolute; left:0; top:0; height:100%; width:60%; background:#0ea5e9; border-radius:99px; }
        .d07-06-07 .handle07-06-07{ position:absolute; top:50%; left:60%; width:14px; height:14px; background:#fff; border:2px solid #0ea5e9; border-radius:50%; transform:translate(-50%,-50%); }
        .d07-06-07 .val07-06-07{ font-size:11px; color:#666; width:32px; }

(function(){
        var root = document.querySelector('.d07-06-07');
        var track = root.querySelector('.track07-06-07');
        var fill = root.querySelector('.fill07-06-07');
        var handle = root.querySelector('.handle07-06-07');
        var icon = root.querySelector('.icon07-06-07');
        var val = root.querySelector('.val07-06-07');
        var dragging = false;
        function update(ratio){
          ratio = Math.max(0, Math.min(1, ratio));
          fill.style.width = (ratio*100) + '%';
          handle.style.left = (ratio*100) + '%';
          val.textContent = Math.round(ratio*100) + '%';
          icon.textContent = ratio === 0 ? '🔇' : ratio < 0.5 ? '🔉' : '🔊';
        }
        function fromEvent(e){
          var rect = track.getBoundingClientRect();
          var x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
          update(x / rect.width);
        }
        track.addEventListener('mousedown', function(e){ dragging = true; fromEvent(e); });
        window.addEventListener('mousemove', function(e){ if(dragging) fromEvent(e); });
        window.addEventListener('mouseup', function(){ dragging = false; });
        track.addEventListener('click', fromEvent);
      })();