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

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)
      })
    },