(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

From version 1.0-beta-13 the slider outputs it’s value in real-time by default.

If you use the slider value within calculations and/or conditional logic the evaluation happens after the user releases the slider thumb by default.

If you want this to happen in real-time also, check the ‘Update calculations while sliding’ option in the field settings. Note this can lead to slow responding forms for complex calculations and conditional logic.

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.

HTML5 slider styling tool (CSS generator)

We’ve created a HTML5 slider styler tool to easily create custom CSS you can use to style your own Gravity Forms slider field when you’re using Advanced Number Field.

Screenshot from the HTML5 Slider styling tool.
Screenshot from the HTML5 Slider styling tool.

Last updated: 11-11-2022

Advanced Number Fieldv1.0.2

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

Read more