prettify `<input type=range>` #43

Go to Source

See the Code
See it Full Page
See Details

You can see the rest of my 1 range input sliders in [this collection](http://codepen.io/collection/DgYaMj/).

Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 35, 38 (nightly), Chrome 40, 42 (canary)/ Opera 28, IE 11 on Windows 8. IE doesn't need the JS, Firefox and Chrome/ Opera rely on it a bit for styling the range track. Chrome/ Opera have a bit of an extra, the end labels at the ends of the track. This is done using `/deep/` – careful, experimental stuff, [the spec has already changed](http://dev.w3.org/csswg/css-scoping-1/#deep-combinator), uncertain future in Chrome ([link #1](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/hRw781MV3mE/pQHWrsKhmj0J), [link #2](https://code.google.com/p/chromium/issues/detail?id=433977)). Fallback for no JS: simply display the same background for the entire track, both before and after the thumb and no end labels.

**Disclaimer because some people got the wrong idea: I did NOT design these sliders.** Whoever knows me is probably aware of the fact that I'm 100% technical and 0% artistic. Me trying to design something would result in visual vomit. I just googled "slider design" and tried to reproduce (as well as I could) the images that search found. Inspiration for this demo:

![image](http://i.imgur.com/6Z0Qd1U.jpg)

You can see the rest of my 1 range input sliders in [this collection](http://codepen.io/collection/DgYaMj/).

This Pen uses: HTML, SCSS, JavaScript, ,, and