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

価格帯デュアルスライダー

2つのつまみで価格帯の範囲を指定する見本です。ECサイトの商品絞り込みフィルターのデザイン確認に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-02-wrap">
          <div class="d04-12-02-labels"><span>&yen;3,000</span><span>&yen;8,000</span></div>
          <div class="d04-12-02-track">
            <div class="d04-12-02-range"></div>
            <div class="d04-12-02-thumb d04-12-02-t1"></div>
            <div class="d04-12-02-thumb d04-12-02-t2"></div>
          </div>
        </div>

CSS

.d04-12-02{align-items:center;justify-content:center}
        .d04-12-02-wrap{width:100%;max-width:240px}
        .d04-12-02-labels{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#111827;margin-bottom:10px}
        .d04-12-02-track{position:relative;height:6px;background:#e5e7eb;border-radius:3px;width:100%}
        .d04-12-02-range{position:absolute;top:0;left:25%;width:45%;height:6px;background:#10b981;border-radius:3px}
        .d04-12-02-thumb{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid #10b981;box-shadow:0 1px 3px rgba(0,0,0,.25)}
        .d04-12-02-t1{left:25%;margin-left:-8px}
        .d04-12-02-t2{left:70%;margin-left:-8px}

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