<div class="range-wrapper">
  <div class="range-cloud">0%</div>
  <input type="range" min="0" max="300" value="30" class="range">
</div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.range-wrapper{
  width: 300px;
  height: 70px;
  position: relative;
  margin: 30px auto;
  text-align: center;
}

.range{
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.range-cloud{
  position: absolute;
}

let range = document.querySelector(".range");
let cloud = document.querySelector(".range-cloud");

range.oninput = function (){
  cloud.innerHTML = range.value;
  cloud.style.left = this.value - 5 * this.value * 0.005 + 'px';
  cloud.style.transform = "translate(-50%,0)"
}