javascript - 如何在没有插件和 Jquery UI 的情况下创建范围 slider ？

Question

我尝试学习 javascript 但陷入困境。我想了解如何自己制作范围 slider 。但每个人都使用像 jquery UI 这样的插件和库。或尝试 stylize input type="range"，尽管 IE9 不支持此功能。这很好而且简单，但我想提高我的技能。我找不到关于这个主题的教程。也许有人对此有所了解？

Answer 1

只是一些琐碎的提示:

• 有一个 div，它是 slider 的主体
• 其顶部有一个 float div，您可以用鼠标拖动它
• 在 float div上实现拖动代码(确保其保留在 slider 区域中)
• 在同一代码中，您可以进行某种计算，并计算 slider 的“值”，例如以百分比表示。

当然你可以选择一个现成的 slider 库，例如 http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html并了解有关实现的更多信息。

这也很轻:http://skidding.github.io/dragdealer/

另一种解决方法实际上是创建一些不是 slider 的东西。但类似的东西。在此底部>Is there a simple JavaScript slider?您可以看到分段音量控制的屏幕截图。事实上，这只是一组上面有鼠标事件的图像。没什么花哨的，也不好，但另一方面，自从 JS 发明以来，它可以与任何浏览器一起使用:)