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
Require Gravity Forms – top
- Download: http://www.gravityforms.com/
Installation – top
- 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
| Option | Defaults | Type | Description |
|---|---|---|---|
| Basic setup | |||
| typedata-type | “single” | string | Choose slider type, could be single – for one handle, or double for two handles |
| mindata-min | 10 | number | Set slider minimum value |
| maxdata-max | 100 | number | Set slider maximum value |
| fromdata-from | min | number | Set start position for left handle (or for single handle) |
| todata-to | max | number | Set start position for right handle |
| Advanced setup | |||
| stepdata-step | 1 | number | Set sliders step. Always > 0. Could be fractional. |
| valuesdata-values | Eg: 2||4|6|8 | array | Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, are no longer can be changed. |
| keyboarddata-keyboard | true | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
| Grid setup | |||
| griddata-grid | false | boolean | Enables grid of values. |
| grid_margindata-grid-margin | true | boolean | Set left and right grid borders. |
| grid_numdata-grid-num | 4 | number | Number of grid units. |
| grid_snapdata-grid-snap | false | boolean | Snap grid to sliders step (step param). If activated, grid_num will not be used. |
| Interval control | |||
| drag_intervaldata-drag-interval | false | boolean | Allow user to drag whole range. Only in double type |
| min_intervaldata-min-interval | — | number | Set minimum diapason between sliders. Only in double type |
| max_intervaldata-max-interval | — | number | Set maximum diapason between sliders. Only in double type |
| Handles control | |||
| from_fixeddata-from-fixed | false | boolean | Fix position of left (or single) handle. |
| from_mindata-from-min | min | number | Set minimum limit for left handle. |
| from_maxdata-from-max | max | number | Set the maximum limit for left handle |
| from_shadowdata-from-shadow | false | boolean | Highlight the limits for left handle |
| to_fixeddata-to-fixed | false | boolean | Fix position of right handle. |
| to_mindata-to-min | min | number | Set the minimum limit for right handle |
| to_maxdata-to-max | max | number | Set the maximum limit for right handle |
| to_shadowdata-to-shadow | false | boolean | Highlight the limits for right handle |
| UI control | |||
| skindata-skin | “flat” | string | Choose UI skin to use |
| hide_min_maxdata-hide-min-max | false | boolean | Hides min and max labels |
| hide_from_todata-hide-from-to | false | boolean | Hide from and to labels |
| force_edgesdata-force-edges | false | boolean | Slider will be always inside it’s container. |
| extra_classesdata-extra-classes | — | string | Traverse extra CSS-classes to slider container |
| blockdata-block | false | boolean | Locks slider and makes it inactive (visually). input is NOT disabled. Can still be send with forms. |
| Prettify numbers | |||
| prettify_enableddata-prettify-enabled | true | boolean | Improve readability of long numbers. 10000000 → 10 000 000 |
| prettify_separatordata-prettify-separator | ” “ | string | Set up your own separator for long numbers. 10 000, 10.000, 10-000 etc. |
| prettify— | null | function | Set 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-prefix | — | string | Set prefix for values. Will be set up right before the number: $100 |
| postfixdata-postfix | — | string | Set postfix for values. Will be set up right after the number: 100k |
| max_postfixdata-max-postfix | — | string | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+ |
| decorate_bothdata-decorate-both | true | boolean | Used 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 | ” — “ | string | Set 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 | ” ; “ | string | Separator for double values in input value property. Default FROM;TO. Only for double type |
| disabledata-disable | false | boolean | Locks slider and makes it inactive. input is disabled too. Invisible to forms. |