有一个简单的 JavaScript 滑块吗？ [关闭]答案

【问题标题】：Is there a simple JavaScript slider? [closed]有一个简单的 JavaScript 滑块吗？ [关闭]
【发布时间】：2010-09-15 10:35:42
【问题描述】：

我需要为 WMP 对象创建一个自定义音量滑块。当前的滑块修改和使用都很复杂，有没有一种简单的方法可以在 HTML 页面上生成滑块，可以将其值传递给 javascript 函数？

【问题讨论】：

使用 HTML5，可以声明原生滑块并采用 CSS 样式。 <input type="range">试试吧！
但不幸的是还不能在 Firefox 中工作:(
这里!!!!!!!!!!!! - stackoverflow.com/questions/22904852/…
欺骗stackoverflow.com/q/14095880/1163000
@TaufikNurrohman 实际上，这个问题是在你链接的问题之前 4 年发布的。新的也应该关闭。

标签： javascript slider controls wmp

【解决方案1】：

嘿，我刚刚创建了自己的 JS 滑块，因为我已经受够了沉重的 Jquery UI 滑块。有兴趣听听人们的想法。已经玩了 5 个小时，所以真的很早。

jsfiddle_slider

【讨论】：

很好的例子 - 我正在寻找一个控件来淡化一个图像的不透明度，所以可以试试这个。
感谢您的示例——缺少不属于某些更大库的简单滑块控件确实很烦人。这促使我尝试编写满足我需求的自己的代码
对于那些想知道的人：WinXP/IE7 工作得很好，WinXP/IE6 工作但需要 CSS 调整，iOS5/Safari 不工作（猜其他触摸设备也不能工作）。对于这么小的一段代码，这是非常令人印象深刻的，伟大的工作 Luc！谢谢！
你能把它也做成垂直的吗？

【解决方案2】：

jQuery UI Slider (API docs)

【讨论】：

如果没有 jquery-touch-punch 的附加库，在移动设备上就不能很好地工作。这也与 Twitter Bootstrap 中的$.fn.button 冲突，所以要小心。

【解决方案3】：

HTML 5 和 Webforms 2 提供了一个 <input type="range">，这将使浏览器为您生成一个本机滑块。不幸的是，并非所有浏览器都支持此功能，但是google 已经使用 js 实现了所有 Webforms 2 控件。 IIRC js 足够智能，可以知道浏览器是否实现了控件，并且只有在没有原生实现时才会触发。

在我看来，最好的做法是尽可能使用浏览器的原生控件。

【讨论】：

【解决方案4】：

一个简单的滑块：我刚刚在纯 HTML5 中测试过，就是这么简单！

<input type="range">

它在 Chrome 上就像一个魅力。我还没有测试过其他浏览器。

【讨论】：

你能再澄清一点吗？
我认为您应该在 html 文件中写入 <input type="range">，并在接受 HTML5 的浏览器中浏览此文件。你会看到一个简单的滑块。
好的！我明白了。

【解决方案5】：

这是另一盏灯JavaScript Slider，似乎符合您的需求。

【讨论】：

【解决方案6】：

Yahoo UI library 也有一个slider control...

【讨论】：

【解决方案7】：

script.aculo.us 有一个 slider control 可能值得一试。

【讨论】：

【解决方案8】：

轻量级的MooTools框架有一个：http://demos.mootools.net/Slider

【讨论】：

【解决方案9】：

我推荐Filament Group的Slider，它的用户体验非常好

http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

【讨论】：

【解决方案10】：

有一个不错的 javascript 滑块，它很容易实现。你可以在这里下载压缩包：http://ruwix.com/javascript-volume-slider-control/

p.s.这里是上述脚本的简化版本：

DEMO link

【讨论】：

【解决方案11】：

Carpe Slider 也有更新的版本：
v1.5carpe_ambiprospect_slider v2.0b ...滑块/草稿/v2.0/

【讨论】：

【解决方案12】：

这是一个简单易用的滑块对象

pagecolumn_webparts_sliders

【讨论】：

【解决方案13】：

下面的代码应该足以让您入门。在 Opera、IE 和 Chrome 中测试。

<script>
var l=0;
function f(i){
im = 'i' + l;
d=document.all[im];
d.height=99;
document.all.f1.t1.value=i;
im = 'i' + i;
d=document.all[im];
d.height=1;
l=i;
}
</script>
<center>
<form id='f1'>
<input type=text value=0 id='t1'>
</form>
<script>
for (i=0;i<=50;i++)
 {
 s = "<img src='j.jpg' height=99 width=9 onMouseOver='f(" + i + ")' id='i" + i + "'>";
 document.write(s);
 }
</script>

【讨论】：

内联事件、document.write、<center> 元素 - 就像 1999 年一样！