目盛り付きステップスライダー

<div class="d04-12-04-wrap">
          <span class="d04-12-04-label">品質レベル</span>
          <div class="d04-12-04-track">
            <div class="d04-12-04-fill"></div>
            <span class="d04-12-04-tick d04-12-04-t0"></span>
            <span class="d04-12-04-tick d04-12-04-t1"></span>
            <span class="d04-12-04-tick d04-12-04-t2"></span>
            <span class="d04-12-04-tick d04-12-04-t3"></span>
            <span class="d04-12-04-tick d04-12-04-t4"></span>
            <div class="d04-12-04-thumb"></div>
          </div>
          <div class="d04-12-04-nums"><span>低</span><span>中</span><span>高</span></div>
        </div>

.d04-12-04{align-items:center;justify-content:center}
        .d04-12-04-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;gap:6px}
        .d04-12-04-label{font-size:12px;color:#6b7280;font-weight:600}
        .d04-12-04-track{position:relative;height:6px;background:#e5e7eb;border-radius:3px;margin:14px 0}
        .d04-12-04-fill{position:absolute;left:0;top:0;height:6px;width:50%;background:#f59e0b;border-radius:3px}
        .d04-12-04-tick{position:absolute;top:-4px;width:2px;height:14px;background:#cbd5e1}
        .d04-12-04-t0{left:0%}
        .d04-12-04-t1{left:25%}
        .d04-12-04-t2{left:50%}
        .d04-12-04-t3{left:75%}
        .d04-12-04-t4{left:100%}
        .d04-12-04-thumb{position:absolute;left:50%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:#f59e0b;border:3px solid #fff;box-shadow:0 0 0 2px #f59e0b}
        .d04-12-04-nums{display:flex;justify-content:space-between;font-size:11px;color:#9ca3af}