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.
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.
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.
Our Premium add-ons for Gravity Forms
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.
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.
List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.
List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.
Read tutorials about
How to Create an Event Workshop Registration + Waitlist System in WordPress
This guide shows how to set up a workshop registration + waitlist system in WordPress: register attendees until capacity is reached, waitlist the rest, approve entries, and auto-promote people when a seat opens using Gravity Forms, Gravity Flow, and GravityView.
Gravity Flow Form Submission Step Tutorial
The Gravity Flow Form Submission step pauses a workflow until another form is submitted, then continues once the handoff is complete. This guide shows how to connect two forms, prefill fields with mapping, send the correct secure link, and troubleshoot the most common “workflow didn’t move” issues.
Gravity Flow Delete an Entry Step Tutorial
The Gravity Flow Delete Entry step lets you trash or permanently remove Gravity Forms entries as part of a workflow. This guide covers the key settings, scheduling options (delay or date-based), and safe testing tips so you can follow retention and privacy rules with confidence.
Gravity Flow Update Fields Step Tutorial
The Gravity Flow Update Fields step pulls values from another entry and writes them into the current entry, so your workflow can route using “live” data. This tutorial covers source form selection, entry lookup with filters and sorting, field mapping, and quick testing.
