javascript - 范围输入偏移量计算不匹配

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/

标签： javascriptjquery

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>