Is there a simple JavaScript slider? [closed]

B

13

44

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?

Bodywork answered 6/10, 2008 at 2:21 Comment(6)

With HTML5, native sliders can be declared and CSS-styled. <input type="range"> Try it! – Communist 25/6, 2012 at 18:52

But unfortunately doesn't work in Firefox yet :( – Hedden 25/10, 2012 at 17:22

HERE!!!!!!!!!!!! - #22905352 – Furrow 11/6, 2014 at 17:6

Dupe of https://mcmap.net/q/374956/-simple-pure-javascript-drag-controller-slider/1163000 – Morissa 22/7, 2016 at 19:13

@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. – Bodywork 26/7, 2016 at 0:12

Shield UI's Slider widget is what you need: demos.shieldui.com/web/slider/basic-usage – Dunn 17/11, 2016 at 12:25

L

30

jQuery UI Slider (API docs)

Lindbom answered 6/10, 2008 at 2:24 Comment(1)

Doesn't work so nicely on mobile without the additional libraries of jquery-touch-punch. And this also conflicts with $.fn.button from Twitter Bootstrap, so watch out. – Alphonso 23/2, 2013 at 0:47

T

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

Therefor answered 5/12, 2011 at 12:38 Comment(4)

Nice example - I'm looking for a control to fade the opacity of one image over another, so might try this. – Lablab 4/7, 2012 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 – Nowhither 18/10, 2012 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! – Blowpipe 29/10, 2012 at 13:50

Can you make it vertical too? – Gallnut 9/3, 2015 at 12:27

L

30

jQuery UI Slider (API docs)

Lindbom answered 6/10, 2008 at 2:24 Comment(1)

Doesn't work so nicely on mobile without the additional libraries of jquery-touch-punch. And this also conflicts with $.fn.button from Twitter Bootstrap, so watch out. – Alphonso 23/2, 2013 at 0:47

P

20

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.

Polychromatic answered 6/10, 2008 at 11:7 Comment(0)

M

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.

Maharashtra answered 1/2, 2013 at 10:27 Comment(3)

could you clarify a little more? – Algesia 3/7, 2014 at 8:2

I think you should write <input type="range"> inside an html file, and browse this file in a browser that accepts HTML5. You would see a simple slider. – Maharashtra 3/7, 2014 at 10:3

okay! I got the point. – Algesia 3/7, 2014 at 10:22

S

6

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

Seismoscope answered 7/4, 2010 at 22:46 Comment(1)

this link is broken – Japhetic 10/3, 2023 at 18:26

V

5

Yahoo UI library has also a slider control...

Verse answered 6/10, 2008 at 10:38 Comment(0)

W

4

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

Waxen answered 6/10, 2008 at 3:2 Comment(0)

D

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

Demimonde answered 25/6, 2012 at 18:50 Comment(0)

L

2

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

Luetic answered 6/10, 2008 at 3:40 Comment(0)

P

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/

Pignut answered 2/11, 2011 at 5:31 Comment(0)

W

1

Here is a simple slider object for easy to use

pagecolumn_webparts_sliders

Westernism answered 11/12, 2009 at 14:53 Comment(0)

C

1

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

Contrasty answered 30/3, 2010 at 17:3 Comment(0)

O

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

Omnivore answered 30/4, 2012 at 21:51 Comment(1)

Inline events, document.write, the <center> element - it's like 1999 all over again! – Ace 1/5, 2012 at 10:37

Recommended topics

Hot tags