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

縦向きスライダー(音量調整風)

縦方向に配置した音量調整風のスライダーです。動画プレイヤーや音楽アプリのUIモックアップに利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-06-wrap">
          <div class="d04-12-06-track">
            <div class="d04-12-06-fill"></div>
            <div class="d04-12-06-thumb"></div>
          </div>
          <span class="d04-12-06-icon">&#128266;</span>
        </div>

CSS

.d04-12-06{align-items:center;justify-content:center}
        .d04-12-06-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d04-12-06-track{position:relative;width:6px;height:150px;background:#e5e7eb;border-radius:3px}
        .d04-12-06-fill{position:absolute;bottom:0;left:0;width:6px;height:55%;background:#22c55e;border-radius:3px}
        .d04-12-06-thumb{position:absolute;bottom:55%;left:50%;width:18px;height:18px;margin-left:-9px;margin-bottom:-9px;border-radius:50%;background:#fff;border:3px solid #22c55e;box-shadow:0 1px 3px rgba(0,0,0,.25)}
        .d04-12-06-icon{font-size:18px}

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