使用纯JavaScript的滑块拇指在输入滑块上的位置

Question

<td>
  <div id="fpscount" style="margin-left: 70px; margin-top: -4px; position:absolute;">15</div>
  <input type="range" name="FPS" min="1" max="60" value="15" id="FPS" class="Slide" onchange="window.status=this.value; Update(this.value);" />
</td>

我的HTML5页面中有一个输入滑块（type="range"）。其中onchange事件我使用innerHTML更新div的值。现在我想要将position设置为absolute的div与滑块一起移动。我已经使用CSS设置了滑块和拇指样式，它可以完美地跨浏览器工作。

我可以使用纯javascript获取滑块拇指位置吗？我不想使用jQueryUI滑块，因为我已经在HTML页面中有我的滑块。任何帮助将不胜感激。

Answer 1

计算滑块的宽度并为div指定相同的宽度。 现在设置div相对于输入的位置。当你在滑块上移动时，计算滑块移动的宽度，并用该宽度指定div的位置。

-Cheers.Happy Coding :)）