JSFiddle - React, Tailwind, and code Playground

HTML

<progress id="progressBar" value="0.5" max="1"></progress>

CSS

#progressBar {
    width:300px;
}

JavaScript

document.getElementById('progressBar').addEventListener('click', function (e) {
    var x = e.pageX - this.offsetLeft;
    //alert('Current position: ' + document.getElementById('progressBar').position);
    
    //Convert x value to progress range [0 1]
    
    var xconvert = x/300; //cause with is 300px and you need a value in [0,1] range
    var finalx = (xconvert).toFixed(2); //round up to one digit after coma
    
    //alert('Click value: ' + finalx);
    
    //If you want change progress bar value after click use code below remove comments
    document.getElementById('progressBar').value = finalx;
});