(Range) Slider
Do you want to show a slider in your Gravity Form? This is the way to do it. Simply add a slider and decide how to show it: what is the maximum (in currency, or number) and minimum and which steps can they make.
Enabling Slider

The Advanced Number Field add-on allows you to show a Gravity Forms Number Field as slider.
- You can define a Minimum and Maximum Range for the Slider
- You can define the Range Step (the intervals).

Filter the slider output
The gravityWP.advancedNumberField.sliderOutput filter can be used to change the (visual) output next to the slider depending on the input value. This is purely visual, it doesn’t change the actual value.
The filter has the following arguments:
value – the formatted value
rawValue – the numeric value
formFieldID – the id of the field, like (formid_fieldid).
properties – the advanced number field properties for this field
Example to show ‘100 or more’ when the slider has value 100:
<script>
gform.addFilter( 'gravityWP.advancedNumberField.sliderOutput', function ( value, rawValue, formFieldID, properties ) {
if( formFieldID == '1_23' && rawValue == 100 ) {
value = "100 or more";
}
return value;
} );
</script>

Showing slider value real-time
You can use this little snippet to show a real-time number while scrolling through the range slider.
<span id="slidernumber"></span>
jQuery(document).ready(function($) {
$(document).on('input', '#input_15_1', function() {
$('#slidernumber').html( $(this).val() );
});
});
Styling the Range Slider
It is possible to style the slider in different ways with custom CSS. This custom CSS can be placed in the WordPress Customizer -> Additional CSS for styling across your whole site, or in a HTML field in your form, wrapped in <style></style> tags for styling a specific form.
Targeting a specific field
If you want to style a specific field, use the #field_FORMID_FIELDID selector. Example for field with id 2 in form with id 1: #field_1_2.
Hide the slider instruction
To hide the slider instruction paste the snippet below in a HTML field in your form. Make sure to target the right field by changing the id’s in #field_1_2:
<style>#field_1_2 .instruction { display: none; }</style>
Customize the look of your slider
Check out the Tutorial Styling (range) Slider Gravity Forms.
Alternatively cssportal.com has a nice interactive slider styler. It generates CSS code for you.
Last updated: 06-04-2022