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

Question

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

Answer 1

只是一些琐碎的提示：

有一个div，就是滑块的主体
上面有一个浮动的 div，您可以用鼠标拖动它
在浮动上实现拖动代码div（确保它保持在滑块区域）
在同一代码中，您可以进行某种计算，并为滑块计算 "value"，例如百分比。

当然，您可以选择一个现成的滑块库，例如 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;
}

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

How to create a range slider without plugins and Jquery UI?

javascript

jquery

range

rangeslider