(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:


gform.addFilter( 'gravityWP.advancedNumberField.sliderOutput', function ( value, rawValue, formFieldID, properties ) {
	if( formFieldID == '1_23' && rawValue == 100 ) {
		value = "100 or more";
    return value;
} );
screenshot of the filtered slider output

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 has a nice interactive slider styler. It generates CSS code for you.

Last updated: 06-04-2022

Advanced Number Field1.0-beta.9

For this functionality you need the GravityWP - Advanced Number Field Add-on installed.

Read more

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.