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

アイコン両端付きスライダー(明るさ調整風)

トラックの両端に明暗アイコンを配置した明るさ調整風のスライダーです。設定画面の輝度調整項目のデザイン例に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-09-wrap">
          <span class="d04-12-09-icon">&#128165;</span>
          <div class="d04-12-09-track">
            <div class="d04-12-09-fill"></div>
            <div class="d04-12-09-thumb"></div>
          </div>
          <span class="d04-12-09-icon">&#128262;</span>
        </div>

CSS

.d04-12-09{align-items:center;justify-content:center}
        .d04-12-09-wrap{display:flex;align-items:center;gap:10px;width:100%;max-width:240px}
        .d04-12-09-icon{font-size:16px}
        .d04-12-09-track{position:relative;flex:1;height:6px;background:#e5e7eb;border-radius:3px}
        .d04-12-09-fill{position:absolute;left:0;top:0;height:6px;width:80%;background:#facc15;border-radius:3px}
        .d04-12-09-thumb{position:absolute;left:80%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid #eab308;box-shadow:0 1px 3px rgba(0,0,0,.25)}

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