范围输入偏移计算不匹配

Question

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

但是，虽然从逻辑上讲，计算应该有效(我对运行状况/进度条等使用了相同的计算(，但工具提示似乎表现得很奇怪，因为它逐渐开始向前移动太远。

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

这在我设置的小提琴中得到了证明 https://jsfiddle.net/5uLwne9L/

Answer 1

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

var sliderCont = $(".slider-container");
var slider = sliderCont.find("input[type=range]");
var tooltip = sliderCont.find("div");
var tooltipPadding = (tooltip.outerWidth() - tooltip.width()) / 2;
slider.on("input", function() {
var perc = slider.val() / slider.attr("max");
tooltip.offset({
top: slider.offset().top - 35,
left: (slider.width() - (tooltip.width() / 2)) * perc - tooltipPadding
});
});

.slider-container {
width: 300px;
margin-top: 70px;
}
.slider-container > div {
position: absolute;
z-index: 99;
padding: 5px 8px;
background: rgba(0, 0, 0, 0.3);
color: white;
border-radius: 6px;
}
input {
width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-container">
<div>value</div>
<input type="range" min="0" max="100" value="36">
</div>