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

Question

有没有办法获取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，它强调了这个问题

Answer 1

尝试这个

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

改编自这里

Answer 2

这对我有用：

var slider = $("#combicalc_contribution-slider")[0];
var sliderPos = slider.value / slider.max;

var pixelPostion = slider.clientWidth * sliderPos;
//this is your pixel value
console.log(pixelPostion);

在您的示例中，像素值已正确计算为 1 到 50 之间的值。

Answer 3

我遇到了同样的问题，标签位置在滑块的远端倾斜：

我注意到当您向滑块的中心移动时问题逐渐改善，然后当您向另一端移动时逐渐变得更糟：

我认为正在发生的事情是因为拇指不能超出滑块轨道的边界，当它向下移动滑块时，拇指宽度的一半从拇指的位置逐渐减少。最终结果是，当拇指的边缘（而不是其中心）到达滑块的末端时，滑块值处于其最小值或最大值。

因此，要修复倾斜的标签，我们需要计算该动态偏移量。这是一个额外详细的偏移计算，试图更好地解释问题（和解决方案）：

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;

我在这里整理了一个问题和解决方案的快速演示：codepen demo

弄清楚这很有趣，但我希望这可以帮助防止其他人花时间。