CSS3 Styling of HTML5 Range Sliders



These only work in WebKit browsers and no others at time of writing (2013). That is they don't work in the "old" (Presto based) Opera 12, but do work in the WebKit based Opera 17 and all versions of Chrome and Safari.


http://demo.webstutorial.com/html5-slider

Works in Chrome, not in Opera.

http://jonathanstark.com/labs/how-to-style-an-html5-range-input-with-css.html

Works in Chrome, not in Opera.

http://codepen.io/SaraVieira/full/JKlwk

Works in Chrome, not in Opera.

http://cssdeck.com/labs/css3-range-slider-functional

Works in Chrome, not in Opera.

http://codepen.io/onediv/pen/BesIE

The Money Slider

Works in Chrome, not in Opera.

http://jsfiddle.net/jrFbM/show

Animated CSS3 rangle slider

Works in Chrome, not in Opera.

http://thefinishedbox.com/files/freebies/rangeinput/index.html

Brushed metal

Works in Chrome, not in Opera.