HTML5 Slider CSS generator


How to use this HTML5 Slider CSS generator for Gravity Forms?

You can use this tool to style your Gravity Forms HTML5 slider. You’ll need to install GravityWP – Advanced Number Field to turn a number field into a slider. In the tool you can style the Track (track color, height, radius), the Track border (color, width), the Track shadow (color, horizontal and vertical offset, blur) and the Thumb (color, width, height, radius), the Thumb border (color, width) and the Thumb shadow (color, horizontal and vertical offset, blur). When you click on the Advanced Number Field button, you can change the CSS to style all or a single Slider in your Gravity Form.

Can I save my HTML5 Slider CSS configuration?

Yes, you can click on the button ‘Save your design’ and it will automatically create a link you can save to come back later and get your styling configuration saved.

Can I change the progress color of my HTML5 Slider?

Yes, you can click on the button ‘Progress color’ to activate this. But be aware: progress color currently only works in the Firefox browser.

Where do I paste my HTML5 slider CSS?

There are different ways you can add custom CSS to your WordPress site or Gravity Form. You can add the CSS in the customizer, it will be available on your whole website. You can also paste it on the page where you embed your form with a Custom HTML field. You need to put the code in between style tags <style></style>. You can also paste the CSS in your theme’s style.css.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.