Range slider for Gravity Forms Product field (Price Field)

Tutorials » GravityWP BV » Range slider for Gravity Forms Product field (Price Field)

Do you want to use a slider to set the value of a Gravity Forms Product field (Price Field)? This is easy to implement as you use the Slider Field value in a Product Field calculation.

Slider fields can be added using our GravityWP – Advanced Number Field Add-On. Custom units are also supported by this add-on.

Demo Form featuring a Product Field with a range slider

Here is a demo featuring the range slider, linked to the Product field (Price Field). It also shows the custom unit feature.

1. How to configure the Range slider

Add a number field to your form, and turn it into a slider by ticking the ‘Show as Slider’ checkbox in the Number Field settings. Define the minimal and maximal value and the range step.

Advanced Number Field Range Slider settings - Screenshot — Advanced Number Field Range Slider settings

Note we are using the GravityWP – Advanced Number Field settings here. These add-on should be installed and active on your site. It might also work with other plugins adding a slider feature. If you want to customize the style the slider check out the Styling (range) Slider Gravity Forms tutorial.

Get Advanced Number Field plugin

2. How to configure the Product field (Price Field) to reflect the range slider value

Add a Product Field to your form. Check the ‘Disable Quantity field’ box and select ‘Calculation’ as Field Type. Enter the calculation. Here you can use the Number Field Range Slider value as a merge tag, like {Range slider value:1}, and multiply it with a certain factor if you like. The price value is automatically updated when the slider value changes.

Product Field settings to use a range slider value - screenshot — Product Field settings to use a range slider value

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.

Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.

Advanced Number Field
Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

JWT Prefill
Create JSON Webtokens to populate fields in your Gravity Form. With a secure key you can validate the data you don’t want to be tampered with.

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.

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 more tutorials about GravityWP BV

GravityWP develops add-ons to collect and manage your data better.

Show all calculations Gravity Forms

Do you need an overview of all the calculations in your Gravity Form? With our Merge Tags Add-on you can easily get a list of all calculations (formulas) in one form.

Pay per word with starting price for Gravity Forms

With the gwp_word_count merge tag modifier for Gravity Forms it is possible to use the word count value of a text field in a formula. This way you can create a flexible Pay per Word calculation based on the amount of words in a text field.

Substring Modifier for Gravity Forms Merge Tags

Do you want to return a portion of a Merge Tag string output? And specify an offset and length of the part of the Merge Tag output? With Advanced Merge Tags it's as easy as it gets.

Quick overview of Gravity Forms Conditional Logic rules

When you're working with a lot of Conditional Logic rules in your form it can be a challenge to keep an overview. Our Merge Tags Add-on for Gravity Forms has a Conditional Logic Tab which creates a quick overview of all the rules in your form.

Bulk Update Gravity Forms Entries

Do you want to bulk update a large batch of Gravity Forms Entries? Like 12321 entries? A nearly undoable task by hand, but a breeze with our Update Multiple Entries add-on.

All tutorials GravityWP BV

TutorialRange slider for Gravity Forms Product field (Price Field)