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 ?

<input type="range" id="combicalc_contribution-slider" min="1" max="50" value="25">

I have tried calculating the position using a combination of max, min & 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.

Here's the code for that:

var sliderWidth = slider[0]['clientWidth'];
var sliderPos = slider[0]['valueAsNumber'] / slider[0]['max'];
jQuery(id).closest('.sliderContainer').append('<div class="sTt">' + val + '</div>');
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});

The overall aim is to place a 'tooltip' above the slider handle as it moves with the value in it.

Here's a jsFiddle which highlights the issue

Answer 1

Try this

val = slider.val();

// Measure width of slider element. adjust by 15 to account for padding/border
width = slider.width() - 15;

// Calculate percentage between left and right of input
min = slider.attr('min');
max = slider.attr('max');
percent = (val - min) / (max - min);

// Janky value to get pointer to line up better
offset = -3;

// the position of the output
newPosition = width * percent + offset;

slider.next('output')
  .css({left: newPosition})
  .text(val);

Adapted from here

Answer 2

I ran into this same problem, where the label position was skewed at the far ends of the slider:

I noticed that the problem incrementally improved as you move towards the center of the slider and then incrementally got worse as you moved toward the other end:

I think what is happening is that because the thumb must not extend beyond the bounds of the slider track, half of the thumb's width is incrementally shaved from the thumb's position as it moves down the slider. The end result is that when the thumb's edge (not its center) reaches the end of the slider, the slider value is at its min or max.

So, to fix the skewed label, we need to calculate that dynamic offset. Here is an extra verbose offset calculation in an attempt to better explain the problem (and solution):

var half_thumb_width = 25/2;

var half_label_width = $(range_input).prev('span.rs-label').outerWidth()/2;

var slider_width = $(range_input).width();
var center_position = slider_length/2;

var percent_of_range = (range_input.value / (range_input.max - range_input.min));
var value_px_position = percent_of_range * slider_length;
var dist_from_center = value_px_position - center_position;
var percent_dist_from_center = dist_from_center / center_position;

var offset = percent_dist_from_center * half_thumb_width;

var final_label_position = value_px_position - half_label_width - offset;

I put together a quick demo of the problem and solution here: codepen demo

It was fun to figure out, but I hope this can help prevent others from spending the time.