Range Slider CSS3 Stying



dark
dark

Only works in chrome, works best in Safari.

It works in Chrome, barely, and really only works properly in Safari (as of fall 2013). But, it's so impressive it has tobe included and it's probably not too much effort to make it work properly.


carpe
carpe original - The original version
carpe

The Carpe Sliders

original
The original version

Free and Pro (paid for) versions. Seems to be the most robust of all.

vrx
vrx vrx1 - Version 1: make it work in Opera and other non-WebKit browsers vrx vrx2 - No background color - ghosted slider
vrx vrx3 - Metallic slider buttons vrx vrx4 - Sripey background
vrx

Locally modified versions of the vxjs slider

vrx1
vrx2
vrx3
vrx4
Version 1: make it work in Opera and other non-WebKit browsers
No background color - ghosted slider
Metallic slider buttons
Sripey background

Works in all modern (CSS3 Capable) browsers. As of fall 2013 this is all the desktop and phone ones that matter: Android, iPhone, Mozilla, Opera (presto) and the WebKit browsers: Safari, Chrome and (the new) Opera.

http://css-tricks.com/examples/RangeBubble
bubbles

Range bubbles.

http://swatelier.info/at/forms/range.asp
styled
sliders and buttons

Mostly works. This is impressive because it's makes an on/off switch out of a range slider. (0 to 1, 1 stop) Doesn't work quite right, yet in all browsers. You could actually do this with a select ("dropdown") too, which might even be easier.

http://vxjs.org/CSS3/slider/slider.html
vxjs

Drop. Dead. Gorgeous. But - it's not a HTML5 slider, it's eighteen gigs of code to do it manually. Pretty though.

http://staging.marcbanderson.com/Daytime_Slider
daytime
Slider

The infamous daytime slider. Works in Chrome. Works in Opera after 6 pm. Try it and see.