How to style an HTML5 range input as a custom slider

You're working on a project, have a tight timeline and need to get your custom slider working now. You don't have time to mess around with javascript libraries, and you thought that HTML inputs can be hard to style depending on the type. Think again!

Html inputs can be easy to spice up, you just need to know some basics.

For a project, I had to make something that looks like this:

It not only has a custom track, but it has a different color progress bar and a custom draggable piece to adjust the slider's value. This is probably an easy job for a custom slider library, but I didn't really have time for finding a good one and quickly whipped up a solution myself, after quite a bit of trial and error. Looking back, a custom library might have been helpful, but sometimes it's nice to build something from scratch.

The difficulty comes because you have to style for individual browsers, and you also have to target each element individually. Kind of a pain...but a good learning experience!

There are four main elements to the slider - the track (the background bar), the thumb (the thing you drag), the fill, and then in this case the progress bar (which isn't default to the range input). I set up my own progress bar, which I then tied into with javascript to update based on when the input is changed and what value it has. I then positioned this div directly over the slider. To compensate for the issue of the slider thumb needing to being able to extend past the end of the slider (per the designs) I had to make the slider 4px wider on either side of the progress bar, then overlay some divs of the same color as the background the slider was on to hide those edges. Hacky, but it worked. Then, to actually style each element on all browsers, you basically have to disable all default behavior and styling and then build your own. I'll go over all the quirks for each browser and some general things I did to get my slider to work.

Chrome/all:

Safari:

No need for any extra styling...surprising!

Well, there you go. It's a lot....but hopefully it can help if you ever find yourself in a similar situation. Cheers, and happy hacking.