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
List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.
Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.
List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.
Entry to Database
Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.
Read tutorials about
Gravity Forms Google Calendar Integration: Create Events From Form Submissions
Connect Gravity Forms to Google Calendar with GravityWP API Connector. Learn how to create calendar events from form submissions, map event details, configure OAuth 2.0, handle time zones, and save the returned Event ID and URL.
Gravity Forms Notion Integration: Create Database Pages Without Zapier
Connect Gravity Forms to Notion without Zapier. This tested tutorial shows how to create Notion database pages from form submissions and save the returned page ID, URL, creation time, and API response.
Gravity Forms ClickUp Integration: Create Tasks Without Zapier
Create a Gravity Forms ClickUp integration without Zapier. This step-by-step tutorial shows how to create ClickUp tasks from form submissions, map priority and requester data, and save returned task details back into Gravity Forms.
Gravity Forms Zendesk Integration: Create Support Tickets Without Zapier
Create Zendesk support tickets from Gravity Forms submissions with GravityWP API Connector and OAuth 2.0, then save returned ticket data in the original entry.
