Do you want to show a slider in your Gravity Form? This is the way to do it. Simply add a slider and decide how to show it: what is the maximum (in currency, or number) and minimum and which steps can they make.
Advanced Number Field
For this functionality you need to install the Advanced Number Field Add-on for Gravity Forms.
Enabling Slider
The Advanced Number Field add-on allows you to show a Gravity Forms Number Field as slider.
- You can define a Minimum and Maximum Range for the Slider
- You can define the Range Step (the intervals).
Showing slider value real-time
The slider has a real-time textual output, next to the slider, but it is also possible to show the output in another spot. You can paste this little snippet below in a HTML field to show a real-time number while scrolling through the range slider.
<span id="slidernumber"></span><script>
jQuery(document).ready(function($) {
$(document).on('input', '#input_15_1', function() {
$('#slidernumber').html( $(this).val() );
});
});
</script>Advanced Number Field
For this functionality, you need the Advanced Number Field plugin from GravityWP.
Styling the slider
We’ve created a HTML5 slider styler tool to easily create custom CSS you can use to style your own Gravity Forms slider field when you’re using Advanced Number Field.
Examples of styled sliders
Here a few examples of styled HTML5 sliders for Gravity Forms. Click on the image to see the configuration and copy the custom CSS code. You can also change the styling settings and save your own design.
Budget slider
Read our tutorial about Styling your Gravity Forms Range Slider to make it fit with your theme and branding.
Our Premium add-ons for Gravity Forms
DateTime Field
The GravityWP - DateTime Field add-on adds a dedicated Date/Time field to Gravity Forms so users can enter both a date and a time in a single input.
All Entries
All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.
List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.
Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.
Read tutorials about
Show Previous Gravity Forms Submissions Using Advanced Merge Tags
This step-by-step tutorial shows how to use GravityWP Advanced Merge Tags to count previous Gravity Forms submissions and calculate total submitted value based on a matching email address.
Gravity Forms LeadConnector Integration with OAuth 2.0
This documentation-based tutorial explains how to connect Gravity Forms to LeadConnector/HighLevel with OAuth 2.0, search contacts by email, and map returned CRM values back into form fields using GravityWP API Connector.
Gravity Forms Zoho CRM Integration: How to Auto-Populate Form Fields by Email
Learn how to auto-populate Gravity Forms from Zoho CRM using GravityWP API Connector. This tutorial shows how to search Zoho Contacts by email and fill form fields with the returned data.
How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)
Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.
