絞り込みサイドフィルタ

<div class="d03-02-04-wrap">
          <div class="d03-02-04-side">
            <p class="d03-02-04-h">カテゴリー</p>
            <label><input type="checkbox" value="news" checked> お知らせ</label>
            <label><input type="checkbox" value="blog" checked> ブログ</label>
            <label><input type="checkbox" value="case" checked> 実績</label>
            <p class="d03-02-04-h">価格上限 <span class="d03-02-04-val">50,000円</span></p>
            <input type="range" class="d03-02-04-range" min="0" max="50000" step="5000" value="50000">
          </div>
          <ul class="d03-02-04-items">
            <li data-c="news" data-p="0">サービス開始のお知らせ</li>
            <li data-c="blog" data-p="12000">SEO入門ガイド</li>
            <li data-c="case" data-p="45000">ECサイト構築事例</li>
            <li data-c="blog" data-p="8000">WordPress高速化</li>
            <li data-c="case" data-p="30000">LP制作の実績</li>
            <li data-c="news" data-p="0">年末休業のご案内</li>
          </ul>
        </div>

.prev.d03-02-04{align-items:flex-start}
        .d03-02-04-wrap{display:flex;gap:14px;width:100%;font-size:13px}
        .d03-02-04-side{flex:0 0 120px;display:flex;flex-direction:column;gap:7px}
        .d03-02-04-h{margin:6px 0 2px;font-weight:700;color:#334155;font-size:12px}
        .d03-02-04-val{color:#4f46e5;font-weight:600}
        .d03-02-04-side label{display:flex;align-items:center;gap:6px;color:#475569;cursor:pointer}
        .d03-02-04-range{width:100%;accent-color:#4f46e5}
        .d03-02-04-items{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
        .d03-02-04-items li{padding:9px 11px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;color:#334155;transition:opacity .2s,transform .2s}
        .d03-02-04-items li.hide{display:none}

(function(){
        var root=document.getElementById('item-03-02-04');
        var checks=root.querySelectorAll('.d03-02-04-side input[type=checkbox]');
        var range=root.querySelector('.d03-02-04-range');
        var val=root.querySelector('.d03-02-04-val');
        var lis=root.querySelectorAll('.d03-02-04-items li');
        function apply(){
          var on=[].filter.call(checks,function(c){return c.checked;}).map(function(c){return c.value;});
          var max=+range.value;
          val.textContent=max.toLocaleString()+'円';
          [].forEach.call(lis,function(li){
            var ok=on.indexOf(li.dataset.c)>-1 && (+li.dataset.p)<=max;
            li.classList.toggle('hide',!ok);
          });
        }
        [].forEach.call(checks,function(c){c.addEventListener('change',apply);});
        range.addEventListener('input',apply);
        apply();
      })();