有简单的JavaScript滑块吗？

Question

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

Answer 1

嘿，我刚创建了自己的JS滑块，因为我有足够的Jquery UI。有兴趣听听别人的想法。已经上了5个小时，所以真的是早期阶段。

jsfiddle_slider

Answer 2

jQuery UI Slider（API docs）

Answer 3

带有HTML 5的

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

从我的观点来看，尽可能使用浏览器本机控件应该被视为最佳做法。

Answer 4

一个简单的滑块：我刚用纯HTML5 测试了这个，而就这么简单！

<input type="range">

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

Answer 5

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

Answer 6

Yahoo UI library还有slider control ...

Answer 7

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

Answer 8

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

Answer 9

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

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

Answer 10

有一个很好的javascript滑块，它很容易实现。您可以在此处下载zip包：http://ruwix.com/javascript-volume-slider-control/

附：这里是上述脚本的简化版本：

DEMO link

Answer 11

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

pagecolumn_webparts_sliders

Answer 12

Carpe Slider也有更新的版本：
v1.5 carpe_ambiprospect_slider v2.0b ... slider / drafts / v2.0 /

Answer 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>