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

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.