<div class="slider-group">
  <div class="slider-header">
    <label class="input-label">Volume</label>
    <span class="slider-value" id="sliderVal">72</span>
  </div>
  <input
    type="range" class="slider" id="slider"
    min="0" max="100" value="72"
    oninput="document.getElementById('sliderVal').textContent = this.value"
  />
  <div class="slider-ticks">
    <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
  </div>
</div>

<style>
.slider-group { display: flex; flex-direction: column; gap: 0.625rem; }
.slider-header { display: flex; justify-content: space-between; align-items: center; }
.slider-value { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 9999px;
  background: linear-gradient(to right, var(--accent) 72%, var(--border) 72%);
  outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--accent);
  transition: transform 0.15s;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.slider-ticks { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--muted); }
</style>