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>

范围输入偏移计算不匹配

1 个答案: