Style Input Range

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 the input tag, just select from one of our preset designs to get you started.

Style Input Range Preview
Thumb Properties

  • Thumb

    Thumb Color

    30px

    15px

    5px

  • Thumb Border

    Thumb Border Color

    1px

    Thumb Shadow Color

    1px

    1px

Track Properties

  • Track

    Track Color

    10px

    5px

  • Track Border

    Track Border Color

    1px

    Track Shadow Color

    1px

    1px

Presets
Click on the thumb to update input range style.







If you have a great design you would like to share, please contact us.
CSS Code