Progress bar по обводке

var left = document.querySelector('.left'); 
var charge = document.querySelector('.charge'); 
var range = document.querySelector('input'); 
var progress = document.querySelector('.progress'); 
 
range.addEventListener('input', function(e) { 
  progress.innerText = `${range.value}/100`; 
  charge.style.width = `${range.value}%`; 
  left.style.width = `${100 - range.value}%`; 
})

* { 
  margin: 0; 
} 
 
body { 
  height: 100vh; 
   
  display: flex; 
  align-items: center; 
  justify-content: center; 
   
  background-color: #212121; 
} 
 
.container { 
  width: 300px; 
  height: 40px; 
   
  display: flex; 
  justify-content: center; 
  align-items: center; 
   
  position: relative; 
   
  border-radius: 1rem; 
  overflow: hidden; 
} 
 
.xxx { 
  height: 100%; 
} 
 
.charge { 
  width: 30%; 
  background-color: #0277BD; 
} 
 
.left { 
  width: 70%; 
  background-color: #616161; 
} 
 
.progress { 
  position: absolute; 
   
  height: 100%; 
  width: 100%; 
   
  display: flex; 
  align-items: center; 
  justify-content: center; 
   
  border-radius: 0.9rem; 
  background-color: #212121; 
   
  transform: scaleX(0.98) scaleY(0.86); 
   
  color: white; 
  font-family: sans-serif; 
} 
 
input { 
  position: absolute; 
  left: 5%; 
  top: 5%; 
}

<input type="range" id="range" min="0" max="100" value="30" step="1"> 
 
<div class="container"> 
  <div class="xxx charge"></div> 
  <div class="xxx left"></div> 
  <span class="progress">30/100</span> 
</div>