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.
Getting started
Ensure you installed and activated the plugin.
Repeater settings
How to add range slider fields?
- Create a form.
- Drop down a field.
- Choose type “Range slider”.
Skins and looks
How to set type to double/ single?
Choose type Double/Single.
How to set min/max value, range,start point, and slider step?
Input the number in the checkboxes below.
How to set custom values ?
E.g:
We create custom day values by typing in the check box below as format: Mon|Tue|Wed|Thu|Fri|Sat|Sun
How to set prefix, postfix?
Input the icon, text…into the box.
Table settings options
| Option | Data-Attr | Defaults | Type | Description |
|---|---|---|---|---|
skin | data-skin | flat | string | Choose UI skin to use (flat, big, modern, round, sharp, square) |
type | data-type | single | string | Choose slider type, could be single – for one handle, or double for two handles |
min | data-min | 10 | number | Set slider minimum value |
max | data-max | 100 | number | Set slider maximum value |
from | data-from | min | number | Set start position for left handle (or for single handle) |
to | data-to | max | number | Set start position for right handle |
step | data-step | 1 | number | Set sliders step. Always > 0. Could be fractional |
min_interval | data-min-interval | - | number | Set minimum diapason between sliders. Only for double type |
max_interval | data-max-interval | - | number | Set minimum maximum between sliders. Only for double type |
drag_interval | data-drag-interval | false | boolean | Allow user to drag whole range. Only for double type |
values | data-values | [] | 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, can no longer be changed |
from_fixed | data-from-fixed | false | boolean | Fix position of left (or single) handle |
from_min | data-from-min | min | number | Set minimum limit for left (or single) handle |
from_max | data-from-max | max | number | Set maximum limit for left (or single) handle |
from_shadow | data-from-shadow | false | boolean | Highlight the limits for left handle |
to_fixed | data-to-fixed | false | boolean | Fix position of right handle |
to_min | data-to-min | min | number | Set minimum limit for right handle |
to_max | data-to-max | max | number | Set maximum limit for right handle |
to_shadow | data-to-shadow | false | boolean | Highlight the right handle |
prettify_enabled | data-prettify-enabled | true | boolean | Improve readability of long numbers: 10000000 → 10 000 000 |
prettify_separator | data-prettify-separator | | string | Set up your own separator for long numbers: 10000000 → 10,000,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 |
force_edges | data-force-edges | false | boolean | Sliders handles and tooltips will be always inside it’s container |
keyboard | data-keyboard | true | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
grid | data-grid | true | boolean | Enables grid of values above the slider |
grid_margin | data-grid-margin | true | boolean | Set left and right grid gaps |
grid_num | data-grid-num | 4 | number | Number of grid units |
grid_snap | data-grid-snap | false | boolean | Snap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50 |
hide_min_max | data-hide-min-max | false | boolean | Hides min and max labels |
hide_from_to | data-hide-from-to | false | boolean | Hides from and to labels |
prefix | data-prefix | “ | string | Set prefix for values. Will be set up right before the number: **$**100 |
postfix | data-postfix | “ | string | Set postfix for values. Will be set up right after the number: 100k |
max_postfix | data-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_both | data-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_separator | data-decorate-both | - | 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. |
input_values_separator | data-input-values-separator | ; | string | Separator for double values in input value property. <input value="25;42"> |
disable | data-disable | false | boolean | Locks slider and makes it inactive. Input is disabled too. Invisible to forms |
That’s it! We hope this article helped you learn how to use Range Slider with Elementor Forms.