css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.


Stuff that can be achieved using just 1 range input.


If you have the time and you'd like to help with fixing stuff, I just wrote an in-depth article on how range inputs work and what approaches are best these days in order to achieve things like progress indicators, slider thumb tooltips, tick marks and labels or making sliders vertical. An image of the desired look for each of these can be found in the description.

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 stuff would result in something that looks like a cat that's been washed in a washing machine puked it. I just googled "slider design" and tried to reproduce (as well as I could) the images that search found.

Also, most of them are NOT CSS-only, even though they have functional and decent looking fallbacks for the no JS case.

Mentioned in my Why Do We Have repeating-linear-gradient Anyway? and The background-clip Property and its Use Cases articles on CSS-Tricks.