Javascript 范围输入偏移量计算不需要'；不匹配

我试图计算偏移量，以使显示拇指/手柄上方值的工具提示居中

然而，虽然从逻辑上讲，计算应该是可行的（我对健康/进度条等使用了相同的计算），但工具提示的行为似乎很奇怪，因为它开始逐渐向前移动太远

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

    debug.text("Percentage: " + perc + "\nWidth: " + slider.width() + "\nOffset: " + slider.offset().left + ", " + slider.width() * perc);

    tooltip.offset({
        top: slider.offset().top - 35,
        left: slider.width() * perc - slider.offset().left
    });
});

---

此fiddle I设置演示了这一点

请尝试在左偏移计算中使用工具提示宽度。要使其居中，还需要考虑工具提示的填充

var sliderCont=$（“.slider容器”）；
var slider=sliderCont.find（“输入[type=range]”）；
var tooltip=sliderCont.find（“div”）；
var tooltipppadding=（tooltip.outerWidth（）-tooltip.width（））/2；
slider.on（“输入”，函数（）{
var perc=slider.val（）/slider.attr（“max”）；
工具提示.偏移量({
顶部：滑块.offset（）.top-35，
左：（slider.width（）-（tooltip.width（）/2））*perc-tooltipppadding
});
});
.slider容器{
宽度：300px；
利润上限：70像素；
}
.slider container>div{
位置：绝对位置；
z指数：99；
填充：5px 8px；
背景：rgba（0,0,0,0.3）；
颜色：白色；
边界半径：6px；
}
输入{
宽度：100%；
}

价值