title: How to precisely find thumb position of input [type="range"]?
body: <p>The idea was to put a tooltip with value related to slider. I thought initially to accomplish that task by using css <code>grid</code>. CSS provides you with grid of any size, 10 or 1000 cols, doesn't matter. By utilizing grid functionality, we can align out tooltip as we wish.
  What we really get is: </p>
  
  <p><a href="https://i.stack.imgur.com/5tZGA.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/5tZGA.jpg" alt="thumb is unstable"></a></p>
  
  <p>Thumb position is sort of unpredictable. It seems that it is being offset, and the direction of that offset is dependent on whether input value is in the left or right part of slider.</p>
  
  <p><em>Note:</em> default thumb behaves exactly the same way. I mean, shape of thumb is not of concern.</p>
  
  <p><strong>So, how does html calculate position of thumb based on its value?</strong></p>