レンジ2点(価格帯)スライダー

<div class="rng">
          <div class="head"><span>価格帯</span><span class="val">¥2,000 〜 ¥7,000</span></div>
          <div class="track"><span class="fill"></span></div>
          <input type="range" class="lo" min="0" max="10000" step="500" value="2000">
          <input type="range" class="hi" min="0" max="10000" step="500" value="7000">
        </div>

.d11-02-07 .rng{width:250px}
        .d11-02-07 .head{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:16px}
        .d11-02-07 .val{color:#5b6ef5;font-weight:700}
        .d11-02-07 .track{position:relative;height:6px;border-radius:6px;background:#e6e6ef;margin:0 8px}
        .d11-02-07 .fill{position:absolute;top:0;bottom:0;background:#5b6ef5;border-radius:6px}
        .d11-02-07 input[type=range]{position:absolute;left:0;width:100%;-webkit-appearance:none;background:none;pointer-events:none;margin:0;height:0}
        .d11-02-07 .rng{position:relative}
        .d11-02-07 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #5b6ef5;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;margin-top:-6px}
        .d11-02-07 input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #5b6ef5;cursor:pointer}

(function(){
        var r=document.querySelector('#item-11-02-07 .d11-02-07');
        var lo=r.querySelector('.lo'),hi=r.querySelector('.hi'),fill=r.querySelector('.fill'),val=r.querySelector('.val');
        var track=r.querySelector('.track'),max=10000;
        function fmt(n){return '¥'+Number(n).toLocaleString();}
        function upd(){
          var a=+lo.value,b=+hi.value;
          if(a>b){var t=a;a=b;b=t;}
          fill.style.left=(a/max*100)+'%';
          fill.style.right=(100-b/max*100)+'%';
          val.textContent=fmt(a)+' 〜 '+fmt(b);
        }
        lo.addEventListener('input',function(){if(+lo.value>+hi.value)lo.value=hi.value;upd();});
        hi.addEventListener('input',function(){if(+hi.value<+lo.value)hi.value=lo.value;upd();});
        upd();
      })();