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 Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.
List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.
List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.
Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.
Read tutorials about
How to Create an Event Registration Form for Workshops
Create an event registration form for workshops in WordPress. Learn which attendee details to collect, how to configure confirmation emails and how to update workshop dates for confirmed registrations using GravityWP Update Multiple Entries.
How to Create Gravity Forms Entries from Comma-Separated Text
Turn a comma-separated task list into separate Gravity Forms entries. Follow our tested Field to Entries setup, mapping, and custom separator example.
How to Validate Repeatable Contact Rows in Gravity Forms
Learn how to validate repeatable Gravity Forms List field rows with GravityWP List Text. This tutorial shows how to add email and regex validation, test invalid values, and confirm that valid team roster data is stored correctly.
Gravity Forms Airtable Integration: Create Records From Form Submissions
Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.
