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

グラデーショントラックスライダー

トラックに虹色グラデーションを施したスライダーです。カラーピッカーや彩度調整UIのビジュアルサンプルに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-03-wrap">
          <span class="d04-12-03-label">彩度</span>
          <div class="d04-12-03-track">
            <div class="d04-12-03-thumb"></div>
          </div>
        </div>

CSS

.d04-12-03{align-items:center;justify-content:center}
        .d04-12-03-wrap{width:100%;max-width:220px;display:flex;flex-direction:column;gap:10px}
        .d04-12-03-label{font-size:12px;color:#6b7280;font-weight:600}
        .d04-12-03-track{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#a855f7,#ec4899,#f97316,#facc15)}
        .d04-12-03-thumb{position:absolute;left:58%;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid #ec4899;box-shadow:0 1px 4px rgba(0,0,0,.3)}

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