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.
Read tutorials about
n8n vs Zapier: Which Automation Tool Actually Fits Your Work?
Trying to decide between n8n vs Zapier? This article breaks down pricing, hosting, integrations, AI features, and where self-hosted n8n on a cheap VPS can beat Zapier’s task-based plans. You’ll also see how Gravity Forms users can plug in the GravityWP n8n Connector and move key workflows off Zapier without rebuilding their forms.
Cloudflare Tunnel + n8n: Expose Local n8n for Webhook Testing (Dev Only)
This guide shows how to use Cloudflare Tunnel Quick Tunnels to put a local n8n instance on the internet for real webhook testing. It’s a dev-only recipe that lets tools like GravityWP’s n8n Connector call your local n8n over HTTPS, without renting a VPS or opening ports.
Self-Host n8n with Docker on a VPS
Learn how to self-host n8n with Docker on a VPS using a production-ready setup. This step-by-step guide walks you through configuring Docker Compose, Postgres, HTTPS, and WEBHOOK_URL so you can run reliable, secure n8n workflows on your own server.
One-Click n8n Hosting: How to Deploy n8n with Railway, Elestio & Coolify
Learn how one-click n8n hosting works on platforms like Railway, Elestio, and Coolify. This guide explains when to pick one-click hosting over n8n Cloud or a raw VPS, how templates are structured, and which env vars, security settings, and troubleshooting tips you can’t skip.
