javascript - 使用纯 javascript slider 拇指在输入 slider 上的位置

标签 javascript html

<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 页面中有一个输入 slider (type="range")。其中 onchange 事件我使用 innerHTML 更新了一个 div 的值。现在我希望这个 position 设置为 absolute 的 div 随 slider 拇指一起移动。我已经使用 CSS 设置了 slider 和拇指样式,它可以完美地跨浏览器工作。

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

最佳答案

计算 slider 的宽度,并为div分配相同的宽度。 现在设置 div 相对于输入的位置。当您在 slider 上移动时,计算 slider 移动的宽度,并根据该宽度分配 div 的位置。

-Cheers.Happy Coding :)

关于javascript - 使用纯 javascript slider 拇指在输入 slider 上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30318616/

相关文章:

javascript - 脱壳到 Node 时保留输出颜色

javascript - 当标记位置更改时,react-google-maps MapWithAMarker 无法重新呈现

javascript - 从单独的文件调用事件监听器

c# - 如何在 C# 中获取呈现的 HTML 文档的高度

javascript - 为什么更改标签上的 css 类顺序会使元素消失?

javascript - Bootstrap 4.3 Slider - 如何使用 jQuery 捕获幻灯片期间的事件?

javascript - 如何使用 javascript 调整网页的大小(宽度/高度)?

javascript onclick 函数调用失败

PHP 防止 F5 重新提交 |不带重定向

javascript - Document.querySelector() 不适用于 bootstrap css