Question

有没有办法获取HTML5范围输入滑块手柄的像素位置？

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

我尝试过使用max，min和amp;组合来计算位置。计算出赛道百分比的价值＆＃39;但计算值在较低值时向左变化，在较高值时向右变化。

以下是代码：

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

总体目标是放置一个工具提示＆＃39;滑块手柄上方，当它移动时带有值。

这里有jsFiddle，突出了问题

Answer 1

这对我有用：

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 2

试试这个

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 3

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

在这里拨弄：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'});
})

Answer 4

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

我注意到，当您移至滑块的中心时，问题逐渐改善，而当您移至另一端时，问题则逐渐恶化：

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

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

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

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

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

4 个答案: