user profile image

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. There's a bit of an extra in Chrome/ Opera with a nicely styled tooltip displaying progress. 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 shade of grey for the entire track, both before and after the thumb and no tooltip.

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:


See also: #1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12

This Pen is a fork of Ana Tudor's Pen [BROKEN] prettify `<input type=range>` #2.


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.