JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress-bar"></div>
<span class="total"></span>
<input type="range" min="0" max="100" value="50">

SCSS

.progress-bar {
  --progress: 0%;
  position: relative;
  height: 10px;
  background: #ccc;
  border-radius: 5px;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--progress);
    background: blue;
    border-radius: 5px;
  } 
}

.total {
  display: inline-flex;
  width: 30px;
}

JavaScript

let input = document.querySelector('input');
let bar = document.querySelector('.progress-bar');
let total = document.querySelector('.total');

function inputHandler() {
	val = input.value;
  total.textContent = `${val}%`;
	bar.style.setProperty('--progress', `${val}%`);
}

input.addEventListener('input', inputHandler);
document.addEventListener("DOMContentLoaded", inputHandler);