Document – Gravity Forms Range Slider Pro

A range slider is a type of input field that allows users to select a value within a specified range by sliding a handle or marker along a visual slider track.

Installation and settings plugin

  1. Require Gravity Forms
  2. Installation
  3. Settings

Require Gravity Forms – top

  1. Download:

Installation – top

  1. Upload the add-to-any directory to the /wp-content/plugins/ directory.

Settings – top

Create a new form – Choose Add Fields – Drop the Slider button for settings.

UI Skin to use

How to set single/double type?

How to set min/max value, range,start point, and slider step?

Input the number in the checkboxes below.

How to set custom values and show grids?

E.g: We create custom day values by typing in the check box below as format.

How to use handle control?

You can type the numbers or click in the check boxes.

How to set prefix, postfix, and your own separator?

Table Settings

Basic setup
typedata-type“single”stringChoose slider type, could be single – for one handle, or double for two handles
mindata-min10numberSet slider minimum value
maxdata-max100numberSet slider maximum value
fromdata-fromminnumberSet start position for left handle (or for single handle)
todata-tomaxnumberSet start position for right handle
Advanced setup
stepdata-step1numberSet sliders step. Always > 0. Could be fractional.
valuesdata-valuesEg: 2||4|6|8arraySet up your own array of possible slider values. They could be numbers or strings. If the values array is set up, minmax and step param, are no longer can be changed.
keyboarddata-keyboardtruebooleanActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
Grid setup
griddata-gridfalsebooleanEnables grid of values.
grid_margindata-grid-margintruebooleanSet left and right grid borders.
grid_numdata-grid-num4numberNumber of grid units.
grid_snapdata-grid-snapfalsebooleanSnap grid to sliders step (step param). If activated, grid_num will not be used.
Interval control
drag_intervaldata-drag-intervalfalsebooleanAllow user to drag whole range. Only in double type
min_intervaldata-min-intervalnumberSet minimum diapason between sliders. Only in double type
max_intervaldata-max-intervalnumberSet maximum diapason between sliders. Only in double type
Handles control
from_fixeddata-from-fixedfalsebooleanFix position of left (or single) handle.
from_mindata-from-minminnumberSet minimum limit for left handle.
from_maxdata-from-maxmaxnumberSet the maximum limit for left handle
from_shadowdata-from-shadowfalsebooleanHighlight the limits for left handle
to_fixeddata-to-fixedfalsebooleanFix position of right handle.
to_mindata-to-minminnumberSet the minimum limit for right handle
to_maxdata-to-maxmaxnumberSet the maximum limit for right handle
to_shadowdata-to-shadowfalsebooleanHighlight the limits for right handle
UI control
skindata-skin“flat”stringChoose UI skin to use
hide_min_maxdata-hide-min-maxfalsebooleanHides min and max labels
hide_from_todata-hide-from-tofalsebooleanHide from and to labels
force_edgesdata-force-edgesfalsebooleanSlider will be always inside it’s container.
extra_classesdata-extra-classesstringTraverse extra CSS-classes to slider container
blockdata-blockfalsebooleanLocks slider and makes it inactive (visually). input is NOT disabled. Can still be send with forms.
Prettify numbers
prettify_enableddata-prettify-enabledtruebooleanImprove readability of long numbers. 10000000 → 10 000 000
prettify_separatordata-prettify-separator” “stringSet up your own separator for long numbers. 10 000, 10.000, 10-000 etc.
prettify—nullfunctionSet up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
prefixdata-prefixstringSet prefix for values. Will be set up right before the number: $100
postfixdata-postfixstringSet postfix for values. Will be set up right after the number: 100k
max_postfixdata-max-postfixstringSpecial postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
decorate_bothdata-decorate-bothtruebooleanUsed for “double” type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
values_separatordata-values-separator” — “stringSet your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
Data control
input_values_separatordata-input-values-separator” ; “stringSeparator for double values in input value property. Default FROM;TO. Only for double type
disabledata-disablefalsebooleanLocks slider and makes it inactive. input is disabled too. Invisible to forms.