値表示付きレンジスライダー

<div class="d04-02-05-wrap">
          <p class="d04-02-05-title">ご予算(万円)</p>
          <div class="d04-02-05-slider">
            <output class="d04-02-05-bubble">50</output>
            <input type="range" min="0" max="100" value="50">
          </div>
        </div>

.d04-02-05-wrap{width:min(280px,100%)}
        .d04-02-05-title{margin:0 0 34px;font-size:14px;color:#555;text-align:center}
        .d04-02-05-slider{position:relative}
        .d04-02-05-slider input{
          -webkit-appearance:none;appearance:none;width:100%;height:6px;
          border-radius:3px;background:#dde2ea;outline:none;cursor:pointer;
        }
        .d04-02-05-slider input::-webkit-slider-thumb{
          -webkit-appearance:none;appearance:none;width:22px;height:22px;
          border-radius:50%;background:#4a6cf7;border:3px solid #fff;
          box-shadow:0 2px 6px rgba(0,0,0,.3);
        }
        .d04-02-05-slider input::-moz-range-thumb{
          width:16px;height:16px;border-radius:50%;background:#4a6cf7;
          border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);
        }
        .d04-02-05-bubble{
          position:absolute;top:-38px;left:50%;transform:translateX(-50%);
          background:#4a6cf7;color:#fff;font-size:13px;font-weight:700;
          padding:4px 10px;border-radius:6px;white-space:nowrap;
        }
        .d04-02-05-bubble::after{
          content:"";position:absolute;left:50%;bottom:-5px;
          transform:translateX(-50%);
          border:5px solid transparent;border-top-color:#4a6cf7;border-bottom:none;
        }

(function(){
        var slider=document.querySelector('.d04-02-05-slider input');
        var bubble=document.querySelector('.d04-02-05-bubble');
        if(!slider||!bubble)return;
        function update(){
          var min=+slider.min,max=+slider.max,val=+slider.value;
          var ratio=(val-min)/(max-min);
          var thumb=22;
          var x=ratio*(slider.offsetWidth-thumb)+thumb/2;
          bubble.style.left=x+'px';
          bubble.textContent=val;
        }
        slider.addEventListener('input',update);
        window.addEventListener('resize',update);
        update();
      })();