CSS Input Range Generator

CSS Input range generator allows you to style and generate the html input range tag. You can preview and copy or download the generated CSS code.

1Thumb Properties


Thumb Color ({{vm.thumbColor}})

Thumb Height ({{vm.thumbHeight}})

Thumb Width ({{vm.thumbWidth}})

Thumb Radius ({{vm.thumbRadius}})

Thumb Border

Thumb Border Color ({{vm.thumbBorderColor}})

Thumb Border Width ({{vm.thumbBorderWidth}})

Thumb Shadow Color ({{vm.thumbShadowColor}})

Thumb Shadow Size ({{vm.thumbShadowSize}})

Thumb Shadow Blur ({{vm.thumbShadowBlur}})

2Track Properties


Track Color ({{vm.trackColor}})

Track Height ({{vm.trackHeight}})

Track Radius ({{vm.trackRadius}})

Track Border

Track Border Color ({{vm.trackBorderColor}})

Track Border Width ({{vm.trackBorderWidth}})

Track Shadow Color ({{vm.trackShadowColor}})

Track Shadow Size ({{vm.trackShadowSize}})

Track Shadow Blur ({{vm.trackShadowBlur}})

Preview download

CSS Code copy


HTML Code copy