Is there a simple JavaScript slider? [closed]

谁说我不能喝 提交于 2019-11-28 16:49:58
John Millikin
Luc

hey i've just created my own JS slider because I had enough of the heavy Jquery UI one. Interested to hear people's thoughts. Been on it for 5 hours, so really really early stages.

jsfiddle_slider

HTML 5 with Webforms 2 provides an <input type="range"> which will make the browser generate a native slider for you. Unfortunately all browsers doesn't have support for this, however google has implemented all Webforms 2 controls with js. IIRC the js is intelligent enough to know if the browser has implemented the control, and triggers only if there is no native implementation.

From my point of view it should be considered best practice to use the browsers native controls when possible.

A simple slider: I have just tested this in pure HTML5, and it's so simple !

<input type="range">

It works like a charm on Chrome. I've not tested other browsers yet.

Here is another light JavaScript Slider that seems to fit your needs.

script.aculo.us has a slider control that might be worth checking out.

The lightweight MooTools framework has one: http://demos.mootools.net/Slider

I recommend Slider from Filament Group, It has very good user experience

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

Denes Ferenc

There's a nice javascript slider, it's very easy to implement. You can download the zip package here: http://ruwix.com/javascript-volume-slider-control/


p.s. here the simplified version of the above script:

DEMO link

Tom

The Carpe Slider has newer versions also:
v1.5 carpe_ambiprospect_slider v2.0b ...slider/drafts/v2.0/

unigg

Here is a simple slider object for easy to use

pagecolumn_webparts_sliders

The code below should be enough to get you started. Tested in Opera, IE and 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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!