title: How to get clicked position of div element for progressbar
body: <p>I have a HTML5 Video panel in my app. I managed to make a progressbar which is working perfectly. But I also want to ability to change <code>currentTime</code> of the video by clicking to any position on progressbar.</p>
  <p>How can I get current position as ratio using React? I searched progressbar components on google but it seems none of them give <code>value</code> of clicked position but just display.</p>
  <p>Or simply, when user clicks on different position of the progressbar, I want to change/get value of progressbar to that position.</p>
  <p><a href="https://i.stack.imgur.com/0iE1O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iE1O.png" alt="enter image description here" /></a></p>
  <h2>Update:</h2>
  <p>I have updated demo and it seems progressbar gone crazy when click multiple times and it seems not close to the clicked position either.</p>
  <p><a href="https://i.stack.imgur.com/0xHfd.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0xHfd.gif" alt="enter image description here" /></a></p>
  <p><strong>Demo</strong>: <a href="https://stackblitz.com/edit/react-ts-zudlbe?file=index.tsx" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-zudlbe?file=index.tsx</a></p>