Question

我在这里缺少一些简单的东西。

我正在尝试构建自定义范围输入，我需要在输入上显示工具提示 - 工具提示需要在移动时跟随范围输入。

通常情况下，我只是使用：以这种方式使用工具提示，但是我需要在这个工具提示中使用HTML，所以我需要求助于JS。

但是，我似乎无法弄清楚确保工具提示位于输入范围拇指的精确左边缘的计算。

我整理了一个显示问题的codepen

我有两个边框 - 一个位于绝对定位的工具提示上，一个位于：属性后面（用于比较）。：属性边界完全保留在左边缘但工具提示没有 - 数学看起来非常简单和基本所以我必须误解它是如何工作的。

HTML

<div class="tooltip">
  <p>How can I get this border to <em>consistently</em> align with the one on the thumb?</p>
</div>
<input type="range" min="0" max="9"/>

CSS

.tooltip {
  position: absolute;
  left: 0;
  background: transparent;
  border-left: dotted 2px orange;
  padding: 2px;
  max-width: 200px;
  text-align: center;
}

input[type=range] {
  margin-top: 100px;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb:after {
  content: '';
  width: 100px;
  background: transparent;
  color: #000;
  border-left: dotted 2px orange;
  pointer-events: none;
  padding: 50px;
  position: relative;
  top: 50px;
}

JS

$('input[type=range]').on('change input', function() {
  var max = 9;
  var value = $(this).val();
  var percent = value / max;
  var width = $(this).width();

  var left = percent * width;

  $('.tooltip').css('left', left);
}).val(4).trigger('change');

感谢您的帮助！

Answer 1

如果我正确理解了OP，我想你需要做的就是：

<强>更新

var left = percent * width + 10 - value;

JS Fiddle

修改

正如Brandon的评论中所述，上述公式中的10表示body填充，如果正文padding:0那么不准确，请使用此重置身体填充后：

var left = percent * width - value;

或者这个：

var left = percent * width + 1 - value;

JS Fiddle和CodePen。

Answer 2

Mi-Creativity是正确的，你需要从左计算中减去值。但是，您还需要考虑输入的所有父元素的填充/边距。

如果您为输入提供“input1”的id，则计算应为：

plyr

相对于输入的绝对定位[type = range]

2 个答案: