title: Get the offset position of an HTML5 range slider handle
body: <p>Is there any way to get the <em>pixel</em> position of the slider handle of an HTML5 range input ?</p>
  
  <pre><code>&lt;input type="range" id="combicalc_contribution-slider" min="1" max="50" value="25"&gt;
  </code></pre>
  
  <p>I have tried calculating the position using a combination of max, min &amp; value to work out the percentage 'down the track' but the calcualted value varies to the left at lower values and the right at higher values.</p>
  
  <p>Here's the code for that:</p>
  
  <pre><code>var sliderWidth = slider[0]['clientWidth'];
  var sliderPos = slider[0]['valueAsNumber'] / slider[0]['max'];
  jQuery(id).closest('.sliderContainer').append('&lt;div class="sTt"&gt;' + val + '&lt;/div&gt;');
  var sTtWidth = jQuery(id).closest('.sliderContainer').find('.sTt').outerWidth(true) / 2;
  var ttPos = (sliderWidth * sliderPos);
  ttPos = ttPos - sTtWidth;
  ttPos = ttPos + 'px';
  jQuery('.sTt').css({'left': ttPos});
  </code></pre>
  
  <p>The overall aim is to place a 'tooltip' above the slider handle as it moves with the value in it.</p>
  
  <p>Here's a <a href="https://jsfiddle.net/moonspace/jj803bh6/1/" rel="noreferrer">jsFiddle</a> which highlights the issue</p>