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

シンプルな単一つまみスライダー

単一のつまみを特定位置に固定表示したシンプルなスライダー見本です。WordPressの音量設定や数値プレビュー用UIのモックとして利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-01-wrap">
          <span class="d04-12-01-label">音量</span>
          <div class="d04-12-01-track">
            <div class="d04-12-01-fill"></div>
            <div class="d04-12-01-thumb"></div>
          </div>
          <span class="d04-12-01-val">65%</span>
        </div>

CSS

.d04-12-01{align-items:center;justify-content:center}
        .d04-12-01-wrap{width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px}
        .d04-12-01-label{font-size:12px;color:#6b7280;font-weight:600}
        .d04-12-01-track{position:relative;width:100%;height:6px;background:#e5e7eb;border-radius:3px}
        .d04-12-01-fill{position:absolute;left:0;top:0;height:6px;width:65%;background:#3b82f6;border-radius:3px}
        .d04-12-01-thumb{position:absolute;left:65%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid #3b82f6;box-shadow:0 1px 3px rgba(0,0,0,.25)}
        .d04-12-01-val{align-self:flex-end;font-size:11px;color:#3b82f6;font-weight:700}

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