如何在输入类型范围内创建浮动元素答案

【问题标题】：How to create a floating element over input type range如何在输入类型范围内创建浮动元素
【发布时间】：2017-05-09 10:00:55
【问题描述】：

我需要span#a 转换到滑块拇指所在的相同位置。我需要以某种方式使用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>

【问题讨论】：

span 和其他通常是内联元素的文本元素会尝试位于先前现有元素的端点。上面的示例失败，因为文本所需的空间超过了可用空间，因此出现在下一行。如果您仍然希望它在 RHS，您可以在 span 上尝试position: absolute。

标签： javascript jquery html css slider

【解决方案1】：

我可以建议使用输入范围oninput 事件来跟踪输入的值，并使用与此value 成比例的margin-left。

这是您需要的代码：

$('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 值需要更多
调整，这样会得到更好的结果。逻辑在那里，但是
只需要一些调整。

【讨论】：

【解决方案2】：

https://jsfiddle.net/2cc83shx/2/

$( document ).ready( function() {
    $( '#rangeInput' ).on( 'change', function() {
        $( '#a' ).css({
            'transform': 'translateX(' + $(this).val() + 'px)'
        })
    })
})

我可以帮忙。你可以稍后从我的小提琴中更好地定位它。（这里我用jquery来选择元素，你也可以用纯js来做）

*更新

如果您希望它在拖动范围时跟随，请按照下面的代码进行操作

https://jsfiddle.net/2cc83shx/3/

【讨论】：

您的解决方案很好，但是当您使输入更宽时它无法正常工作。不过谢谢。