range-input.css 🎨

Generate CSS to style range inputs that look consistent across all browsers

Demo Range Input

Track Styles

Color:

Width: Choose a width unit:

Height: Choose a height unit:

Border-radius: Choose a border-radius unit:

*The track is the element that the thumb runs along.

Thumb Styles

Color:

Width: Choose a width unit:

Height: Choose a height unit:

Border-radius: Choose a border-radius unit:

*The thumb is used to select varying range values.

About this Project

Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. To speed up the process, I created this tool to make it easier for you to create custom range inputs that will look awesome and consistent across all browsers!

🔖 To learn more, check out my Smashing Magazine article describing the quirkiness of the range input.