パーツ番号 11-15-11 ・ CSSのみ

太陽と月が同時に見えるスライダー

トラックの両端に太陽と月を常時表示し、つまみの位置で現在のモードを示すスライダーの見本です。設定画面の視覚的な分かりやすさを高めます。

staticcss

プレビュー

ソースコード

HTML

<span class="d11-15-11-track">
          <svg viewBox="0 0 24 24" width="14" height="14"><circle cx="12" cy="12" r="6" fill="#fbbf24"/></svg>
          <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36A7 7 0 1113.36 3.1 9.13 9.13 0 0012 3z" fill="#e2e8f0"/></svg>
          <span class="d11-15-11-thumb"></span>
        </span>

CSS

.d11-15-11-track{position:relative;display:flex;align-items:center;justify-content:space-between;width:100px;height:34px;border-radius:17px;background:linear-gradient(90deg,#fde68a,#1e293b);padding:0 8px;box-sizing:border-box}
        .d11-15-11-thumb{position:absolute;top:3px;right:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}

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