Range Slider

22 Apr Range Slider

To enable using Range Slider, make sure that you activated Ion.RangeSlider plugin. Go to General Settings page and turn on Ion.RangeSlider plugin. Then go to popup editor and click on Popup Elements Toolbar to add regular text field to the popup. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

• Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted popup entries.
• Position. Set the position of the element relative to the upper left corner of the base frame.
• Width. Set the width of the element.
• Animation. Adjust the appearance and disappearance effect and duration.

Style Properties

The general view of text fields is configured through Popup Settings. It’s applied to all input fields. Here you can adjust view of the field.

• Show grid. Enables grid of values.
• Show min/max labels. Enables labels for min and max values.
• Custom CSS class. This class name will be added to the input field.
• CSS styles. Set custom css for certain element parts and states.

Data Properties

• Range size. Set basic parameters of range slider. Min – slider minimum value. Max – slider maximum value. Step – slider step (always > 0).
• Handle value. The default value is the value that the field has before the user has entered anything. If range slider has 2 handles, this is the default value of the left handle.
• Double handle. Enable second handle.
• Second handle value. This is the default value of the right handle.
• Value prefix. Set prefix for values. Will be set up right before the number. For example – $100.
• Value postfix. Set postfix for values. Will be set up right after the number. For example – 100k.
• Read only. If enabled, the user can not edit the field value.
• Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

• ID. The unique ID of the input field.
• Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
  • Equal. Checks that the value is identical to the given token.
  • Greater Than. Checks that the value is numerically greater than the given minimum.
  • In Array. Checks that the value is in a list of allowed values.
  • Less Than. Checks that the value is numerically less than the given maximum.