価格帯レンジスライダー

<div class="d11-05-11-wrap">
          <p class="d11-05-11-label">価格帯で絞り込む: <span id="d1597Out">&yen;1,000 〜 &yen;8,000</span></p>
          <div class="d11-05-11-row">
            <span class="d11-05-11-tag">下限</span>
            <input type="range" class="d11-05-11-range" id="d1597Min" min="0" max="10000" step="500" value="1000">
          </div>
          <div class="d11-05-11-row">
            <span class="d11-05-11-tag">上限</span>
            <input type="range" class="d11-05-11-range" id="d1597Max" min="0" max="10000" step="500" value="8000">
          </div>
        </div>

.prev.d11-05-11{align-items:flex-start;justify-content:flex-start}
        .d11-05-11-wrap{width:100%}
        .d11-05-11-label{font-size:12.5px;color:#374151;margin:0 0 14px;font-weight:600}
        .d11-05-11-label span{color:#4f46e5;font-weight:800}
        .d11-05-11-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .d11-05-11-tag{flex:0 0 34px;font-size:11px;color:#9ca3af}
        .d11-05-11-range{flex:1;accent-color:#4f46e5}

(function(){
        var root=document.querySelector('.d11-05-11-wrap');
        if(!root)return;
        var out=root.querySelector('#d1597Out');
        var minR=root.querySelector('#d1597Min');
        var maxR=root.querySelector('#d1597Max');
        function fmt(v){return '¥'+Number(v).toLocaleString();}
        function update(){
          var lo=parseInt(minR.value,10);
          var hi=parseInt(maxR.value,10);
          if(lo>hi){var t=lo;lo=hi;hi=t;}
          out.textContent=fmt(lo)+' 〜 '+fmt(hi);
        }
        minR.addEventListener('input',update);
        maxR.addEventListener('input',update);
      })();