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

Question

有什么方法可以获取 HTML5 范围输入的滑块句柄的 pixel 位置？

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

我尝试使用 max、min 和 value 的组合来计算位置，以计算出“沿着轨道”的百分比，但计算值在较低值时向左变化，在较高值时向右变化。

代码如下：

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

改编自here

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

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

Answer 4

这是一个替代解决方案，基本上是获取鼠标位置并使用它而不是滑块位置。 （可能需要一些调整）

在这里提琴：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：

<div class="sliderHolder">
<input type="range" min="0" max="100" id="slider" />
</div>

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('<div class="tt">' + sliderValue + '</div>');
  jQuery('.tt').css({'left':mouseX + 'px'});
})