パーツ番号 04-12-08 ・ CSSのみ

複数セグメント色分けスライダートラック

赤・黄・緑にゾーン分けしたトラックを持つスライダーです。健康スコアやリスクレベル表示のUI見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-08-wrap">
          <span class="d04-12-08-label">健康スコア</span>
          <div class="d04-12-08-track">
            <div class="d04-12-08-bar">
              <span class="d04-12-08-seg d04-12-08-red"></span>
              <span class="d04-12-08-seg d04-12-08-yellow"></span>
              <span class="d04-12-08-seg d04-12-08-green"></span>
            </div>
            <div class="d04-12-08-thumb"></div>
          </div>
        </div>

CSS

.d04-12-08{align-items:center;justify-content:center}
        .d04-12-08-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;gap:10px}
        .d04-12-08-label{font-size:12px;color:#6b7280;font-weight:600}
        .d04-12-08-track{position:relative;height:18px}
        .d04-12-08-bar{position:absolute;left:0;top:5px;right:0;height:8px;border-radius:4px;display:flex;overflow:hidden}
        .d04-12-08-seg{display:block;height:8px}
        .d04-12-08-red{width:30%;background:#ef4444}
        .d04-12-08-yellow{width:35%;background:#f59e0b}
        .d04-12-08-green{width:35%;background:#22c55e}
        .d04-12-08-thumb{position:absolute;left:78%;top:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;border:3px solid #16a34a;box-shadow:0 1px 3px rgba(0,0,0,.3)}

クラス名 .d04-12-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。