パーツ番号 03-10-05 ・ CSSのみ

価格レンジスライダー付きフィルターパネル

2つのつまみで価格帯を指定するスライダーを静止状態で見せるフィルターパネルです。WordPress製品一覧の価格絞り込みUIのデザイン下敷きとして使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-10-05-panel">
          <h4 class="d03-10-05-heading">価格で絞り込む</h4>
          <div class="d03-10-05-track">
            <span class="d03-10-05-fill"></span>
            <span class="d03-10-05-handle" style="left:20%"></span>
            <span class="d03-10-05-handle" style="left:70%"></span>
          </div>
          <div class="d03-10-05-range"><span>¥1,200</span><span>¥8,900</span></div>
        </div>

CSS

.d03-10-05-panel{width:100%;max-width:260px}
        .d03-10-05-heading{font-size:13px;font-weight:800;color:#0f172a;margin:0 0 26px}
        .d03-10-05-track{position:relative;height:4px;background:#e2e8f0;border-radius:99px;margin:0 6px}
        .d03-10-05-fill{
          position:absolute;left:20%;right:30%;top:0;bottom:0;
          background:#2563eb;border-radius:99px;
        }
        .d03-10-05-handle{
          position:absolute;top:50%;transform:translate(-50%,-50%);
          width:15px;height:15px;border-radius:50%;background:#fff;
          border:3px solid #2563eb;box-shadow:0 1px 3px rgba(0,0,0,.25);
        }
        .d03-10-05-range{
          display:flex;justify-content:space-between;margin-top:18px;
          font-size:11.5px;color:#64748b;font-weight:600;
        }

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