How to Build a Gravity Forms Price Calculator with a Slider Field

1. How a Slider Connects to a Gravity Forms Calculation
2. What You’ll Build
3. What You’ll Need
4. How to Add a Slider to a Gravity Forms Price Calculator
   1. Step 1 — Add a Slider Field to Your Form
   2. Step 2 — Configure the Slider
   3. Step 3 — Add a Calculation Field and Write the Formula
   4. Step 4 — Test the Calculator
5. Taking It Further

Gravity Forms lets you build forms that calculate prices as users fill them out. That got me curious about what people wanted to add on top of it.

Turns out, some were looking for a more visual way to choose a quantity — dragging instead of typing, and watching the total follow.

Gravity Forms Sliders lets you do exactly that. Here’s how to set it up.

How a Slider Connects to a Gravity Forms Calculation

Gravity Forms Sliders (GP Sliders for short) is part of the Gravity Perks suite. It adds a draggable slider to Gravity Forms, either as its own Slider field, or by enabling it on an existing Number field.

Behind the scenes, the slider stores a number. Reference that number in a calculation-enabled Number or Product field with a merge tag — and the total updates as the slider moves.

What You’ll Build

By the end of this guide, you’ll have:

• A Gravity Forms price calculator with a draggable slider
• A total that updates as users move the slider

What You’ll Need

• Gravity Forms (any license)
• GP Sliders, installed via Spellbook — Gravity Wiz’s free plugin manager
  • To install: open Spellbook › navigate to Perks › activate GP Sliders
• A form where users choose a quantity, amount, or value with a slider

How to Add a Slider to a Gravity Forms Price Calculator

For this walkthrough, we’ll use an event registration form where each seat costs $29. Swap in whatever values fit your use case.

Step 1 — Add a Slider Field to Your Form

1. Open your form in the Gravity Forms editor.
2. Under Advanced Fields › add a Slider field.
3. Give the field a clear label, like Number of Seats.
4. Note the field ID. You’ll use it when writing your formula in Step 3.

Step 2 — Configure the Slider

1. Set your Min, Max, and Step values. For a seat-based calculator, try something like Min 1, Max 100, Step 5.
2. Optional: Enable Show Value Tooltip or Show Tick Marks to help users see what they’re selecting.

Step 3 — Add a Calculation Field and Write the Formula

1. Add a Number field to your form.
2. In the General tab, check enable Enable Calculation.
3. In the formula editor, write your formula using the Slider field’s merge tag: {:[field_id].1} — where [field_id] is your Slider field’s ID. Multiply it by your price per unit to get the total.
   • For example, if your Slider field ID is 1, and each seat costs $29, the formula would be: {:1.1} * 29
4. In the Number Format dropdown, select Currency so the total displays with the currency.

Step 4 — Test the Calculator

1. Preview the form and drag the slider across a few values — the total should update as you drag.
2. Test the min and max values to make sure the boundaries work as expected.
3. Submit a test entry and confirm the stored value matches the slider value.

Taking It Further

Once the basic calculator is working, here are a few ways to take it further.

• Want a price range instead of a single value? Enable range mode so users can drag both a minimum and maximum value.
• Want to show named tiers instead of raw numbers? Use Custom Choices mode to show labels like Starter, Growth, and Pro while storing numbers behind them.
• Need rates that change based on quantity? Use GP Advanced Calculations for formulas like “$29 per seat for the first 10, then $19 after that.” For product-specific discounts, GP Conditional Pricing can also help.