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

太めつまみのモバイル向けスライダー

太いつまみと厚みのあるトラックでタップしやすさを表現したモバイル向けスライダーです。スマホ設定画面のUIサンプルとして活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-10-wrap">
          <span class="d04-12-10-label">明るさ調整</span>
          <div class="d04-12-10-track">
            <div class="d04-12-10-fill"></div>
            <div class="d04-12-10-thumb"></div>
          </div>
        </div>

CSS

.d04-12-10{align-items:center;justify-content:center}
        .d04-12-10-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;gap:14px}
        .d04-12-10-label{font-size:13px;color:#374151;font-weight:700}
        .d04-12-10-track{position:relative;height:14px;background:#e5e7eb;border-radius:7px}
        .d04-12-10-fill{position:absolute;left:0;top:0;height:14px;width:60%;background:#6366f1;border-radius:7px}
        .d04-12-10-thumb{position:absolute;left:60%;top:50%;width:32px;height:32px;margin-left:-16px;margin-top:-16px;border-radius:50%;background:#fff;border:5px solid #6366f1;box-shadow:0 2px 6px rgba(0,0,0,.3)}

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