Range Input滑块提示框偏移量计算不符问题求助

我看了你的代码和问题描述，之前在进度条上能用的计算逻辑，到range input这里失效，主要是因为计算left偏移时的逻辑搞反了，而且没考虑tooltip自身的宽度（要居中的话得减去自身宽度的一半）。

先给你拆解下问题所在：

• 原代码里的left: slider.width() * perc - slider.offset().left完全搞反了顺序，应该是先拿到滑块的左侧偏移，再加上滑块内部的thumb位置，而不是做减法
• 没有考虑tooltip自身的宽度，这会导致tooltip的左边缘对齐thumb，而不是居中对齐

修正后的代码 #

var debug = $(".debug"); 
var sliderCont = $(".slider-container"); 
var slider = sliderCont.find("input[type=range]"); 
var tooltip = sliderCont.find("div"); 

slider.on("input", function() { 
  var perc = slider.val() / slider.attr("max");
  var sliderLeft = slider.offset().left;
  var sliderWidth = slider.width();
  // 计算thumb的水平位置：滑块左侧偏移 + 滑块宽度 * 百分比
  var thumbPosition = sliderLeft + (sliderWidth * perc);
  // 计算tooltip的left：thumb位置 - tooltip自身宽度的一半，实现居中
  var tooltipLeft = thumbPosition - (tooltip.width() / 2);
  
  debug.text("Percentage: " + perc + "\nWidth: " + sliderWidth + "\nOffset: " + sliderLeft + ", " + thumbPosition); 
  
  tooltip.offset({ 
    top: slider.offset().top - 35, 
    left: tooltipLeft 
  }); 
});

关键修正点 #

• 调整left偏移的计算顺序：先获取滑块的左侧绝对偏移slider.offset().left，再加上滑块内部thumb的相对位置slider.width() * perc，得到thumb的绝对位置
• 添加tooltip居中修正：用thumb的绝对位置减去tooltip宽度的一半，这样tooltip的中心点就会和thumb对齐
• 变量拆分后更易读，也方便调试

这样调整后，tooltip就能随着thumb的移动始终保持居中了，你可以测试下这个逻辑，应该能解决偏移过度的问题。

内容的提问来源于stack exchange，提问作者user2332995