Determine click position on progress bar?

Question

Is it possible to determine the value/position of a user\'s click on a progress bar using plain javascript?

Currently, I can detect a click on the element but can only g

Answer 1

I tested your project, try this solution:

document.getElementById('progressBar').addEventListener('click', function (e) {
    var x = e.pageX - this.offsetLeft;
    
    //Uncomment the following line to activate alert
    //alert('Current position: ' + document.getElementById('progressBar').position);
    
    //Save position before the click
    var startPos = document.getElementById('progressBar').position;
    
    //Convert x value to progress range [0 1]
    
    var xconvert = x/300; //cause width is 300px and you need a value in [0,1] range
    var finalx = (xconvert).toFixed(1); //round up to one digit after coma
    
    //Uncomment the following line to activate alert
    //alert('Click value: ' + finalx);
  
    //If you don't want change progress bar value after click comment the following line
    document.getElementById('progressBar').value = finalx;
    
    document.getElementById('result').innerHTML = ('Start position: ' + startPos + "<br/><br/>");
    document.getElementById('result').innerHTML += ('Current position: ' + document.getElementById('progressBar').position + "<br/>");
    document.getElementById('result').innerHTML += ('Current value: ' + document.getElementById('progressBar').value + "<br/></br/>");
    document.getElementById('result').innerHTML += ('Real click value: ' + xconvert + "<br/>");
    document.getElementById('result').innerHTML += ('Current value set in progressbar: ' + finalx + "<br/>");
});

#progressBar {
    width:300px;
}

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

• I set your progress bar width to 300px (you can change it)
• Get position x in progress bar
• Convert x position range from [0,300] to [0,1]
• Change value inside progress bar

Outputs:

• Start Position
• Current Position and Value (after click)
• Real click value (not rounded up)
• Value set in progressbar (rounded up)

Working demo: http://jsfiddle.net/Yeti82/c0qfumbL

Thanks to bobbyrne01 for update corrections!

Answer 2

The click event actually takes a parameter that includes event information including the click position information. You can use this to determine where in the progress bar the click occured.

document.getElementById('progressBar').addEventListener('click', function (event) {

    document.getElementById('result').innerHTML = ('Current position: ' + document.getElementById('progressBar').position + "<br/>");
        document.getElementById('result').innerHTML += ('Current value: ' + document.getElementById('progressBar').value + "<br/>");
        document.getElementById('result').innerHTML += ('Mouse click (absolute): ' + event.offsetX + ", " + event.offsetY + "<br/>");
});

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

Answer 3

For those willing to use a slider instead of a progress bar, obtaining the value would be much easier:

HTML

<input type="range" min="0" max="100" value="50" id="slider">

JavaScript

const slider = document.getElementById('slider');
slider.onclick = () => alert('Current value: ' + slider.value);

Answer 4

If you want the value clicked for a generic max value (a value between 0 and 1 in this case), you just need some simple math.

document.getElementById('progressBar').addEventListener('click', function (e) {

    var value_clicked = e.offsetX * this.max / this.offsetWidth;
    alert(value_clicked);

});

Fiddle

Answer 5

$(document).ready(function() {

  $(".media-progress").on("click", function(e) {

    var max = $(this).width(); //Get width element
    var pos = e.pageX - $(this).offset().left; //Position cursor
    var dual = Math.round(pos / max * 100); // Round %


    if (dual > 100) {
      var dual = 100;
    }


    $(this).val(dual);
    $("#progress-value").text(dual);

  });
  
  
  });

.media-progress {
  /*BG*/
  position: relative;
  width: 75%;
  display: inline-block;
  cursor: pointer;
  height: 14px;
  background: gray;
  border: none;
  vertical-align: middle;
}

.media-progress::-webkit-progress-bar {
  /*Chrome-Safari BG*/
  background: gray;
  border: none
}

.media-progress::-webkit-progress-value {
  /*Chrome-Safari value*/
  background: #17BAB3;
  border: none
}

.media-progress::-moz-progress-bar {
  /*Firefox value*/
  background: #17BAB3;
  border: none
}

.media-progress::-ms-fill {
  /*IE-MS value*/
  background: #17BAB3;
  border: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="5" max="100" class="media-progress"></progress>
<div id="progress-value"></div>

Answer 6

The top voted answer is not actually going to work universally. This is because the you have to consider all the offsetLeft of all the offsetParents. Here is an improved answer. I hope it helps.

__addProgressBarListener () {
      document.getElementById('video-player-progress-bar').addEventListener('click', function (e) {
        let totalOffset = this.offsetLeft
        let parent = this.offsetParent
        const maximumLoop = 10
        let counter = 0
        while (document.body !== parent && counter < maximumLoop) {
          counter += 1
          totalOffset += parent.offsetLeft
          parent = parent.offsetParent
        }
        const x = e.pageX - totalOffset // or e.offsetX (less support, though)
        const clickedValue = x / this.offsetWidth
        console.log('x: ', x)
        console.log('clickedValue: ', clickedValue)
      })
    },