🚀 How to Add a Range Slider in Gravity Forms Using the Slider Gravity Forms Add-on
Table of Contents
Key takeaways: Slider Gravity Forms Add-on
- Gravity Forms doesn’t include sliders by default, so using the Slider Gravity Forms add-on is the easiest way to add interactive range sliders.
- The number field is transformed into a slider by simply enabling the add-on and configuring min, max, and step values.
- Custom JavaScript allows live value updates, making the user experience more dynamic and user-friendly.
- Server-side PHP validation ensures users can’t skip slider input, improving form accuracy and data quality.
- You can fully style the slider UI using custom HTML and CSS, giving your form a modern, branded look.
How I Built a Custom Range Slider in Gravity Forms with Live Value Display
hen done right, a Gravity Form with a range slider looks clean, modern, and easy to use—just like a budgeting tool where users slide a bar to pick a number, and the number shows instantly beside it. Below, I’ll walk you through how I achieved this setup using the Slider Gravity Forms Add-on from GravityWP. I’ve also added custom PHP validation, JavaScript, HTML, and CSS for better style, user experience, and form control.
📹 Video Coming Soon!
🧩 Introduction: Why Use a Slider in Gravity Forms?
The default Number Field in Gravity Forms only lets users type a number. It doesn’t give them a visual, interactive way to pick a number. That’s where the Slider Gravity Forms add-on helps. It transforms a number field into a slider—easy to move, fun to use.
With this setup, your users can:
- Slide left or right to select a value (like budget or quantity)
- Instantly see their chosen number update live
- Get error messages if the slider is left at 0
🛠️ Step-by-Step Tutorial to Add a Range Slider in Gravity Forms
1. ✅ Install the Slider Gravity Forms Add-on
2. 🧱 Create the Gravity Form and Add a Number Field
Go to Forms > New Form
Add a Number Field (this is where the slider will be applied)
Make sure to set Minimum, Maximum, and Step values (e.g., Min: 100, Max: 5000, Step: 100)
In the field’s Advanced Settings, enable the Range Slider UI
3. 🎨 Add Custom HTML Block (For Design)
Here’s the HTML block I used to show the selected value:
<div class="box-parent-wrapper">
<div class="inner-box-title"><h3 class="your-budget-title">How much your budget?</h3></div>
<div class="inner-box-your-budget">
<p>Budget: <span class="dollar-sign">$</span><span id="slidernumber"></span></p>
</div>
</div>
4. 💻 Add the JavaScript (For Live Value Update)
To make the slider show the selected value live as the user moves it, we need to add a custom JavaScript snippet. This will update the number beside the slider instantly and also handle what happens after form validation errors.
🧩 Where to Place the JavaScript Code?
You don’t need to edit theme files or mess with the code editor. You can simply install and use a plugin to safely insert JavaScript.
✅ Steps to Add JavaScript Using a Plugin
Install the Plugin:
Go to your WordPress Dashboard
Navigate to Plugins → Add New
Search for:
Head & Footer Code Settingsby Aleksandar UroševićClick Install Now, then Activate
Insert Your JavaScript Code:
After activation, go to Settings → Head & Footer Code
Scroll down to the Footer Section
Paste the JavaScript code (see below) in the “Footer JavaScript Code” box
Click Save Changes
Make Sure jQuery Is Enabled
Gravity Forms uses jQuery, so your code will work as long as jQuery is loaded (default in most themes)
jQuery(document).on('gform_post_render', function(event, formId) {
if (formId === 2) { // Replace with your actual Form ID
const $ = jQuery;
const slider = $('#input_2_5');
const display = $('#slidernumber');
// ✅ Get the slider's current value (reliable after plugin initializes)
const initialVal2 = parseInt(slider.val());
// ✅ Display it if it's greater than 0, else show nothing
display.text(initialVal2 > 0 ? initialVal2 : '');
const validationContainer = $('#gform_2_validation_container');
const sliderVal = parseInt(slider.val());
// 1️⃣ Check if page is first load using sessionStorage
const isFirstPageLoad = !sessionStorage.getItem('form_2_loaded');
sessionStorage.setItem('form_2_loaded', 'true');
// 2️⃣ Check if form was submitted but has validation errors
const hasValidationErrors = validationContainer.length > 0 && validationContainer.is(':visible');
// 3️⃣ Check if slider has valid value (must be > 0)
const isSliderValid = !isNaN(sliderVal) && sliderVal > 0;
// 4️⃣ Apply logic based on these states
if (isFirstPageLoad) {
// 👶 First load – set slider to 0 and blank the display
// Only set to 0 on first load (prevent overriding value after validation)
if (!window.sliderInitOnce) {
slider.val(0).trigger('input');
window.sliderInitOnce = true;
}
} else if (hasValidationErrors) {
if (!isSliderValid) {
// ❌ Form failed, and slider is invalid
// Only set to 0 on first load (prevent overriding value after validation)
if (!window.sliderInitOnce) {
slider.val(0).trigger('input');
window.sliderInitOnce = true;
}
} else {
// ✅ Form failed, but slider is valid – show current value
display.text(sliderVal);
//const initialVal2 = parseInt(slider.val());
}
} else {
display.text('0'); // ✅ Sets the number display to 0
// Only set to 0 on first load (prevent overriding value after validation)
if (!window.sliderInitOnce) {
slider.val(0).trigger('input');
window.sliderInitOnce = true;
}
}
slider.on('input change', function() {
const val = $(this).val();
display.text(parseInt(val) > 0 ? val : '');
});
}
});
5. 🛡️ Add PHP Server-side Validation (For Better Form Control)
To make sure the form doesn’t submit when the slider value is left at 0 or empty, we need to add PHP server-side validation. This prevents users from skipping the slider field, even if they try to bypass it with browser tricks.
👉 Important:
Add the following code to your WordPress theme’s functions.php file. You can find this file in your theme folder under:/wp-content/themes/your-theme-name/functions.php
🔒 Why this matters:
Even if someone disables JavaScript or tampers with the frontend, this validation on the server side will block the form from submitting without a valid slider value.
add_filter('gform_validation_2', function($validation_result) {
$form = $validation_result['form'];
foreach ($form['fields'] as &$field) {
if ($field->id == 5) { // ✅ Slider field ID
$slider_val = rgpost('input_5'); // ✅ matches input name
if ($slider_val === '0' || $slider_val === 0 || $slider_val === '') {
$field->failed_validation = true;
$field->validation_message = 'Please move the slider to select a number between 100 and 5000.';
$validation_result['is_valid'] = false;
}
}
}
$validation_result['form'] = $form;
return $validation_result;
});
6. 🎨 Apply Custom CSS (For Design and Styling)
You can use this full CSS code to:
Hide form titles
Style the slider
Remove the range slider ruler
- Change the input fields’ background color
- Change the position of the range slider title and the “budget” text
.your-budget-form_wrapper .gform_title {
display: none;
width: 0px;
overflow: hidden;
}
.your-budget-form_wrapper .gfield--type-html .box-parent-wrapper {
padding: 0px;
}
.your-budget-form_wrapper #gform_fields_2 {
row-gap: 25px !important;
}
.your-budget-form_wrapper .box-parent-wrapper {
display: block;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.your-budget-form_wrapper .inner-box-title {
width: 100%;
}
.your-budget-form_wrapper .inner-box-title h3 {
font-size: 26px !important;
font-weight: 700 !important;
font-family: "Lato", Sans-serif;
line-height: 30px;
color: #304372;
}
.your-budget-form_wrapper .inner-box-your-budget {
width: 100%;
}
.your-budget-form_wrapper .inner-box-your-budget p {
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Lato", Sans-serif;
line-height: 20px;
color: #101010;
display: flex;
align-items: center; /* vertical alignment */
gap: 5px; /* space between text and number */
margin: 0;
justify-content: flex-end; /* Align content to the right */
}
.your-budget-form_wrapper .inner-box-your-budget p span {
font-size: 40px !important;
font-weight: 700 !important;
line-height: 40px;
color: #304372;
}
@media (min-width: 576px) {
.your-budget-form_wrapper .box-parent-wrapper {
display: flex;
}
.your-budget-form_wrapper .inner-box-title {
width: 70%;
text-align: left;
}
.your-budget-form_wrapper .inner-box-title h3 {
font-size: 32px !important;
line-height: 32px;
}
.your-budget-form_wrapper .inner-box-your-budget {
width: 30%;
text-align: right;
}
}
.your-budget-form .gwp_slider output {
display: none !important;
width: 0px;
overflow: hidden;
}
.your-budget-form .gwp_slider_container {
width: 100% !important;
padding-right: 0px !important;
}
.your-budget-form .da-slider-range #gfield_instruction_2_5 {
display: none;
width: 0px;
overflow: hidden;
}
.your-budget-form .da-slider-range .gwp_slider_ruler-number span {
color: #000 !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 20px !important;
font-family: "Lato", Sans-serif;
}
.your-budget-form .da-slider-range .gwp_slider_ruler-number span::before {
display: none !important;
width: 0px;
height: 0px;
overflow: hidden;
}
.your-budget-form .da-slider-range .gwp_ruler {
border-top: 0px;
border-top: none !important;
}
/* form input styles */
.your-budget-form .gfield select,
.your-budget-form .gfield .ginput_container > input {
border: 1px solid #D9D9D9 !important;
background: #eef2f3 !important;
color: #101010 !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Lato", Sans-serif;
outline: none !important;
}
.your-budget-form .gfield .ginput_container > input {
border: 1px solid #D9D9D9 !important;
background: #eef2f3 !important;
color: #101010 !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 20px !important;
font-family: "Lato", Sans-serif;
outline: none !important;
}
.your-budget-form .gform_button {
background: #304372 !important;
color: #FFD79A !important;
font-size: 20px !important;
font-weight: 700 !important;
font-family: "Lato", Sans-serif;
outline: none !important;
line-height: 20px !important;
border-radius: 5px !important;
border: 1px solid #FFD79A;
padding: 12px 32px !important;
min-width: 100%!important;
margin: 0 auto !important;
}
@media (min-width: 576px) {
.your-budget-form .gform_button {
min-width: 400px !important;
}
}
📌 Conclusion
In this tutorial, I covered:
Introduction: Why sliders are better than plain number fields
Form setup using GravityWP’s Slider add-on
HTML block for number display
JavaScript code to update the slider value live
PHP backend validation to stop submission when value is 0
CSS styles for a clean design
This setup gives you both front-end beauty and backend control, offering users a smooth, user-friendly experience.
Ready to tackle your WordPress challenges?
👉 Get Professional Web Developer and Technical SEO Help from Aljun
SEO takes time and requires ongoing effort. If you need a skilled freelancer to handle your SEO, you’re in the right place.
With 10+ years of experience as a Web Developer and Technical SEO expert, I understand how to optimize websites for search rankings, user experience, and business growth.
📅 Book a free consultation today to discuss your Web Development and SEO needs!
