Is there a simple JavaScript slider?

Question

I need to create a custom volume slider for a WMP object. The current slider is difficult to modify and use, is there an easy way to generate a slider on an HTML page that can pass this value to the javascript function?

Answer 1

jQuery UI Slider ( API docs )

Answer 2

Hey, I just created my own JS slider because I had a fairly large JQuery UI. It is interesting to hear people's thoughts. Was on it for 5 hours, so really really early stages.

jsfiddle_slider

Answer 3

HTML 5 with Webforms 2 provides <input type="range"> , which forces the browser to create its own slider for you. Unfortunately, all browsers do not have support, however google has implemented all Webforms 2 controls using js. IIRC js is smart enough to know if the browser has implemented this control and only starts if there is no built-in implementation.

From my point of view, it should be considered best practice to use the built-in browser controls when possible.

Answer 4

Simple slider: I just tested it in pure HTML5 and so easy !

 <input type="range"> 

It works like a charm for Chrome. I have not tested other browsers yet.

Answer 5

jQuery and Yahoo are probably standards, but I recently found Dragdealer that looks very lightweight and easy to set up and reuse ...

http://code.ovidiu.ch/dragdealer/

Answer 6

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

Answer 7

Yahoo's user interface library also has a slider ...

Answer 8

script.aculo.us has slider controls that may be worth checking out.

Answer 9

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

Answer 10

I recommend Slider from the Filament group, it has a very good user interface

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

Answer 11

There is a good javascript slider, it is very simple to implement. You can download the zip package here: http://ruwix.com/javascript-volume-slider-control/

postscript here is a simplified version of the script:

DEMO link

Answer 12

Here is a simple slider object for convenient use.

pagecolumn_webparts_sliders

Answer 13

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

Answer 14

The code below should be sufficient to get 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>