Get the offset position of an HTML5 range slider handle

Question

Is there any way to get the pixel position of the slider handle of an HTML5 range input ?

Answer 1

Here is an alternative solution, basically get the mouse position and use that instead of the slider position. (some tweaking required, possibly)

Fiddle here: https://jsfiddle.net/brightertools/qdhp2g17/5/

CSS:

.sliderHolder{
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid silver;
  #slider{
    width: 100%;
  }
  .tt{
    position: absolute;
    border: 1px solid grey;
    top: 20px;
    margin: 5px;
  }
}

HTML:

JS:

var dragging = false;
jQuery('#slider').on('input',function(){
  dragging = true;
});
jQuery('#slider').on('mouseup',function(){
  dragging = false;
});
jQuery('#slider').on('mousemove',function(e){
if (dragging == false)
{
    return;
}
jQuery('.tt').remove();
var mouseX = e.clientX - 14;
  jQuery('.tt').remove();
  var slider = jQuery('#slider');
    var sliderValue = jQuery('#slider').val();
   jQuery('.sliderHolder').append('
' + sliderValue + '
');
  jQuery('.tt').css({'left':mouseX + 'px'});
})