(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
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 cssportal.com 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.
Last updated: 11-11-2022
