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

ラベル吹き出し付きスライダー

つまみの上に現在値を示す吹き出しを添えたスライダーです。数値入力の直感的な見え方を伝えるサンプルに適します。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-07-wrap">
          <div class="d04-12-07-track">
            <div class="d04-12-07-fill"></div>
            <div class="d04-12-07-thumb">
              <span class="d04-12-07-bubble">42</span>
            </div>
          </div>
        </div>

CSS

.d04-12-07{align-items:center;justify-content:center}
        .d04-12-07-wrap{width:100%;max-width:220px;padding-top:30px}
        .d04-12-07-track{position:relative;height:6px;background:#e5e7eb;border-radius:3px}
        .d04-12-07-fill{position:absolute;left:0;top:0;height:6px;width:42%;background:#0ea5e9;border-radius:3px}
        .d04-12-07-thumb{position:absolute;left:42%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid #0ea5e9;box-shadow:0 1px 3px rgba(0,0,0,.25)}
        .d04-12-07-bubble{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:#0ea5e9;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
        .d04-12-07-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:#0ea5e9}

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