슬라이더

<div class="sl-wrap">
  <div class="sl-top"><span>볼륨</span><b id="slv">42%</b></div>
  <div class="track" id="trk"><div class="fill" id="fl"></div><div class="thumb" id="th"></div></div>
</div>

.sl-wrap{width:min(220px,88%)}
.sl-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px}
.sl-top b{color:var(--fg)}
.track{position:relative;height:5px;border-radius:3px;background:var(--line)}
.fill{position:absolute;left:0;top:0;height:100%;width:42%;border-radius:3px;background:var(--accent)}
.thumb{position:absolute;top:50%;left:42%;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translate(-50%,-50%)}

const fl = document.getElementById('fl'), th = document.getElementById('th'), slv = document.getElementById('slv'), trk = document.getElementById('trk');
function set(v) { v = Math.max(0, Math.min(100, v)); fl.style.width = v + '%'; th.style.left = v + '%'; slv.textContent = Math.round(v) + '%'; return v; }
set(42);
let auto = true;
function drag(e) {
  auto = false;
  const r = trk.getBoundingClientRect();
  set(((e.clientX - r.left) / r.width) * 100);
}
th.addEventListener('pointerdown', (e) => { auto = false; th.setPointerCapture(e.pointerId); th.addEventListener('pointermove', drag); });
th.addEventListener('pointerup', (e) => th.removeEventListener('pointermove', drag));
let t = 0;
setInterval(() => { if (!auto) return; t += 0.06; set(50 + Math.sin(t) * 45); }, 60);