**March 2022 update** Sliders with native range `input` (and `label`, `output`, `datalist` if/ where necessary). I’ve managed to go through about half of them to fix them using modern, more compact and more robust code, but there’s over a hundred Pens in this collection and **almost half of them remain broken**! — **WARNING: MOST DEMOS ARE NOW BROKEN!** If you have the time and you’d like to help with fixing stuff, I just wrote [an in-depth article](https://css-tricks.com/sliding-nightmare-understanding-range-input/) 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?](https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/) and [The `background-clip` Property and its Use Cases](https://css-tricks.com/the-backgound-clip-property-and-use-cases/) articles on CSS-Tricks.