javascript - 如何在输入类型范围内创建 float 元素

Question

我需要 span#a 转换到 slider 拇指所在的相同位置。我需要以某种方式使用 transform: translateX(and_step_to_translate_here)。所以说简单一点，我需要 span#a 来跟随轨道拇指。我该怎么做？

input {width: 90%;}

<input type="range" min="0" max="100" step="1"/><br/>
<span id="a">I'm following.</span>

Answer 1

我可以建议使用输入范围 oninput事件跟随输入值并使用比例 margin-left有了这个value .

这是您需要的代码:

$('input[type="range"]').on('input', function() {
  $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px');
});

演示:

$('input[type="range"]').on('input', function() {
  $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px');
});

input {
  width: 90%;
}

span#a {
  display: block;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" step="1" value="0" />
<span id="a">I'm following.</span>

注意:

• 这将更新 span左边距与值成正比 的 range , 所以它将在 0% 之间更新至 100% ，这给了它漂浮的效果。

• 在下面的示例演示中，margin-left值(value)需要更多
  调整，这样它会得到更好的结果。逻辑是有的，但是
  只需要一些调整。