Slider

<div style="display:flex;align-items:center;gap:12px;width:360px">
  <div class="atlas-slider" style="position:relative;flex:1;height:16px">
    <div class="atlas-slider-track" style="position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;height:4px;background:var(--bg-raised);border-radius:2px;border:1px solid var(--border-default)">
      <div class="atlas-slider-range" style="width:60%;height:100%;background:var(--accent-highlight);border-radius:2px"></div>
    </div>
    <div class="atlas-slider-thumb" style="position:absolute;left:60%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--text-primary);border-radius:2px;border:1px solid var(--accent-highlight);box-shadow:0 0 0 2px rgba(0,112,243,0.2)"></div>
  </div>
  <span style="font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);width:40px;text-align:right">60</span>
</div>