Goal: create a nicely styled cross-browser real 3D slider with just 1 range input. Tested & works in Chrome 40, 42 (canary)/ Opera 28. 2D in Firefox 35, 38 (nightly), 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 3D and value indicator. This is done using
/deep/ - careful, experimental stuff, the spec has already changed, uncertain future in Chrome (link #1, link #2). Fallback for no JS: simply display the same background for the entire track, both before and after the thumb and value indicator.
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:
You can see the rest of my 1 range input sliders in this collection.