javascript - 获取HTML5范围滑块手柄的偏移位置

有什么方法可以获取HTML5范围输入的滑块手柄的像素位置吗？

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

我尝试使用最大值，最小值和值的组合来计算位置，以计算出“沿轨道”的百分比，但是计算得出的值在较低值处向左变化，在较高值处向右变化。

这是代码:

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});

总体目标是在滑块手柄上移动值时在滑块手柄上方放置一个“工具提示”。

这是一个突出问题的jsFiddle

最佳答案

试试这个

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);

改编自here