家賃レンジフィルタースライダー

<div class="d10-13-02-panel">
          <p class="d10-13-02-label">家賃 <span class="d10-13-02-min">6</span>〜<span class="d10-13-02-max">21</span>万円</p>
          <div class="d10-13-02-track">
            <span class="d10-13-02-fill"></span>
            <span class="d10-13-02-handle" data-handle="min" style="left:20%"></span>
            <span class="d10-13-02-handle" data-handle="max" style="left:70%"></span>
          </div>
        </div>

.d10-13-02{padding:20px}
        .d10-13-02-panel{width:100%;max-width:260px}
        .d10-13-02-label{margin:0 0 20px;font-size:13px;font-weight:700;color:#233;text-align:center}
        .d10-13-02-label span{color:#2f7fef}
        .d10-13-02-track{position:relative;height:4px;background:#e3e8ec;border-radius:2px;margin:0 4px}
        .d10-13-02-fill{position:absolute;top:0;bottom:0;background:#2f7fef;border-radius:2px}
        .d10-13-02-handle{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:#fff;border:3px solid #2f7fef;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:grab;touch-action:none}
        .d10-13-02-handle:active{cursor:grabbing}

(function(){
        var root=document.getElementById('item-10-13-02');if(!root)return;
        var track=root.querySelector('.d10-13-02-track');
        var fill=root.querySelector('.d10-13-02-fill');
        var minH=root.querySelector('.d10-13-02-handle[data-handle="min"]');
        var maxH=root.querySelector('.d10-13-02-handle[data-handle="max"]');
        var minLabel=root.querySelector('.d10-13-02-min');
        var maxLabel=root.querySelector('.d10-13-02-max');
        var RANGE=30;
        var vals={min:20,max:70};
        function pctToVal(p){return Math.round(p/100*RANGE);}
        function render(){
          minH.style.left=vals.min+'%';
          maxH.style.left=vals.max+'%';
          fill.style.left=vals.min+'%';
          fill.style.width=(vals.max-vals.min)+'%';
          minLabel.textContent=pctToVal(vals.min);
          maxLabel.textContent=pctToVal(vals.max);
        }
        function clientToPct(clientX){
          var rect=track.getBoundingClientRect();
          var p=(clientX-rect.left)/rect.width*100;
          return Math.max(0,Math.min(100,p));
        }
        function bindDrag(handle,key,isMin){
          handle.addEventListener('pointerdown',function(e){
            handle.setPointerCapture(e.pointerId);
            function move(ev){
              var p=clientToPct(ev.clientX);
              if(isMin){p=Math.min(p,vals.max-4);}else{p=Math.max(p,vals.min+4);}
              vals[key]=p;
              render();
            }
            function up(){
              handle.removeEventListener('pointermove',move);
              handle.removeEventListener('pointerup',up);
            }
            handle.addEventListener('pointermove',move);
            handle.addEventListener('pointerup',up);
          });
        }
        bindDrag(minH,'min',true);
        bindDrag(maxH,'max',false);
        track.addEventListener('click',function(e){
          if(e.target===minH||e.target===maxH)return;
          var p=clientToPct(e.clientX);
          if(Math.abs(p-vals.min)<=Math.abs(p-vals.max)){vals.min=Math.min(p,vals.max-4);}
          else{vals.max=Math.max(p,vals.min+4);}
          render();
        });
        render();
      })();