Is there a simple JavaScript slider?

Question

I need to create a custom volume slider for a WMP object. The current slider is complicated to modify, and use, is there a simple way to generate a slider on an HTML page that can have it's value passed to a javascript function?

With HTML5, native sliders can be declared and CSS-styled. `` Try it! — Alba Mendez, Jun 25 '12 at 18:52
**HERE!!!!!!!!!!!!** - http://stackoverflow.com/questions/22904852/html-scroll-box-with-horizontal-controls-for-vertical-scrolling/ — T.Todua, Jun 11 '14 at 17:06
@TaufikNurrohman You've got that backwards actually, this question was posted 4 years before the one you linked. The new one should likewise be closed. — UnkwnTech, Jul 26 '16 at 00:12
Shield UI's Slider widget is what you need: http://demos.shieldui.com/web/slider/basic-usage — Vladimir Georgiev, Nov 17 '16 at 12:25

score 35 · Answer 1 · edited Dec 08 '11 at 13:22

35

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

edited Dec 08 '11 at 13:22

Chandra Sekhar

16,256
10
67
90

answered Dec 05 '11 at 12:38

Luc

985
7
10

Nice example - I'm looking for a control to fade the opacity of one image over another, so might try this. – Dave Everitt Jul 04 '12 at 17:58
Thanks for the example -- a lack of simple slider controls that are not part of some much larger library has been really annoying. This motivated me to try to just go write my own that meets my needs – Michael Wasser Oct 18 '12 at 17:47
For those of you wondering: WinXP/IE7 works great, WinXP/IE6 works but needs CSS tweaking, iOS5/Safari does not work (guess other touch devices won't either). For such a small piece of code it is very impressive, Great work Luc! thanks! – Xavi Esteve Oct 29 '12 at 13:50
Can you make it vertical too? – sproketboy Mar 09 '15 at 12:27

score 30 · Accepted Answer · edited Mar 20 '12 at 05:06

30

jQuery UI Slider (API docs)

edited Mar 20 '12 at 05:06

dazbradbury

5,729
5
34
38

answered Oct 06 '08 at 02:24

John Millikin

197,344
39
212
226

5

Doesn't work so nicely on mobile without the additional libraries of [jquery-touch-punch](https://github.com/furf/jquery-ui-touch-punch). And this also conflicts with `$.fn.button` from Twitter Bootstrap, so watch out. – Ehtesh Choudhury Feb 23 '13 at 00:47

Stephane Rolland · Answer 3 · 2014-07-03T10:58:14.283

20

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.

edited Jul 03 '14 at 10:58

answered Feb 01 '13 at 10:27

Stephane Rolland

38,876
35
121
169

could you clarify a little more? – Mostafiz Rahman Jul 03 '14 at 08:02
2

I think you should write `` inside an html file, and browse this file in a browser that accepts HTML5. You would see a simple slider. – Stephane Rolland Jul 03 '14 at 10:03
okay! I got the point. – Mostafiz Rahman Jul 03 '14 at 10:22

score 20 · Answer 4 · answered Oct 06 '08 at 11:07

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.

score 6 · Answer 5 · answered Apr 07 '10 at 22:46

6

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

answered Apr 07 '10 at 22:46

treznik

7,955
13
47
59

this link is broken – Cybernetic Mar 10 '23 at 18:26

score 5 · Answer 6 · answered Oct 06 '08 at 10:38

5

Yahoo UI library has also a slider control...

answered Oct 06 '08 at 10:38

Alex Gyoshev

11,929
4
44
74

score 4 · Answer 7 · answered Oct 06 '08 at 03:02

4

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

answered Oct 06 '08 at 03:02

pkaeding

36,513
30
103
141

score 3 · Answer 8 · edited Jun 11 '14 at 17:12

3

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:

enter image description here

DEMO link

edited Jun 11 '14 at 17:12

T.Todua

53,146
19
236
237

answered Jun 25 '12 at 18:50

Denes Ferenc

51
1

score 2 · Answer 9 · answered Oct 06 '08 at 03:40

2

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

answered Oct 06 '08 at 03:40

Ates Goral

137,716
26
137
190

score 2 · Answer 10 · answered Nov 02 '11 at 05:31

2

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/

answered Nov 02 '11 at 05:31

Farm

3,356
2
31
32

score 1 · Answer 11 · edited Dec 08 '11 at 13:23

1

Here is a simple slider object for easy to use

pagecolumn_webparts_sliders

edited Dec 08 '11 at 13:23

Chandra Sekhar

16,256
10
67
90

answered Dec 11 '09 at 14:53

unigg

466
3
8

score 1 · Answer 12 · edited Dec 08 '11 at 13:23

1

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

edited Dec 08 '11 at 13:23

Chandra Sekhar

16,256
10
67
90

answered Mar 30 '10 at 17:03

Tom

11
1

Martin · Answer 13 · 2012-05-01T10:20:38.373

-1

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>

edited May 01 '12 at 10:20

answered Apr 30 '12 at 21:51

Martin

27
1

14

Inline events, `document.write`, the `` element - it's like 1999 all over again! – Yi Jiang May 01 '12 at 10:37

Is there a simple JavaScript slider?

13 Answers13

Linked