(Range) Slider

Docs » Advanced Number Field » (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

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