You can use this CSS generator for generating code for the GravityWP – Advanced Number Field Add-on for Gravity Forms, with which you can turn any Number Field into a HTML5 Slider.
FAQ
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.
