如何在没有插件和 Jquery UI 的情况下创建范围滑块？

Question

我尝试学习 javascript 并卡住了。我想了解如何自己制作范围滑块。但是每个人都使用像 jquery UI 这样的插件和库。或尝试风格化输入类型 =“范围”，尽管 IE9 不支持。它既好又简单，但我想提高我的技能。我找不到关于这个主题的教程。 可能有人对此有所了解？

Answer 1

只是一些琐碎的提示：

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

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

这个也挺轻的：http://skidding.github.io/dragdealer/

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

Answer 2

一个非常小的滑块。适用于 IE 和 Microsoft Edge。

html:

<input type="range" />

javascript：

::-ms-thumb {
    height: 20px;
    background: green;
}
::-ms-track {
    height: 2px;
    color: transparent;
}