Documentation

Styling the Range Slider

To activate styling of the slider element go to your Form Settings and select the ‘Advanced Number’ tab. Toggle ‘Activate slider styling’ to enable styling your slider fields for this particular form.

Available settings for styling the slider

Field LabelDescription
Track ColorSets the color of the slider track.
Track HeightSets the height of the slider track.
Track RadiusSets the border-radius of the slider track.
Track Border ColorSets the border color of the slider track.
Track Border WidthSets the border width of the slider track.
Track Shadow ColorSets the shadow color of the slider track.
Track Shadow Horizontal OffsetSets the horizontal offset of the slider track shadow.
Track Shadow Vertical OffsetSets the vertical offset of the slider track shadow.
Track Shadow BlurSets the blur amount for the slider track shadow.
Thumb ColorSets the color of the slider thumb.
Thumb WidthSets the width of the slider thumb.
Thumb HeightSets the height of the slider thumb.
Thumb RadiusSets the border-radius of the slider thumb.
Thumb Border ColorSets the border color of the slider thumb.
Thumb Border WidthSets the border width of the slider thumb.
Thumb Shadow ColorSets the shadow color of the slider thumb.
Thumb Shadow Horizontal OffsetSets the horizontal offset of the slider thumb shadow.
Thumb Shadow Vertical OffsetSets the vertical offset of the slider thumb shadow.
Thumb Shadow BlurSets the blur amount for the slider thumb shadow.

Styling using custom CSS

It is also possible to style the slider 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.

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

Last updated: 06-06-2024

Advanced Number Fieldv1.1

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

Read more