Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, 29, IE 11 on Windows 8.
A nightmare to keep the look consistent across browsers while using no JS. For Firefox and IE I have the
::-ms-fill-lower respectively. For Chrome/ Opera I've used pseudo elements on the thumb and track. This is something that didn't work until recently, so I'm also using
/deep/ - careful, experimental stuff, only supported in Blink, the spec has already changed, no future really, already not working anymore in canary - see (link #1, link #2).
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.