This is a handy generator that will help you style the html input range tag. You will be able to style all aspects of the input range tag and see the changes in the preview box below. Once you are happy with the style, simply copy and paste the generated css code into your project. If you need a bit of help to style of the input tag, just select from one of our preset designs to get you started.

Style Input Range Preview
Thumb Properties
Thumb Color

30px

15px

5px

Thumb Border Color

1px

Thumb Shadow Color

1px

1px

Track Properties
Track Color

10px

5px

Track Border Color

1px

Track Shadow Color

1px

1px

CSS Code

		
Presets
Click on the thumb to update input range style. If you have a great design you would like to share, please contact us.