Range Field Element
The Range Field Element adds a slider to a Tirenoa Form. The visitor drags a handle between a minimum and a maximum value, for example to state a budget, a quantity, a size or how strongly they agree with a statement.
Next to the slider the element shows a small number box with the current value. Visitors can read the exact number while they drag, or type a value into the box directly, which makes the field precise on touch screens as well.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Range Field Element
Open your form under Tirenoa > Forms and add the Range Field Element. Enter a Field Label and a Field Name in lowercase letters, digits, dashes or underscores; the name identifies the value in the form entries and in the notification email. Then set the scale with Range Min Value, Range Max Value and Range Step Value (0, 100 and 1 when you add the element), and choose the starting position with Default Value.
Orientation decides on which side of the slider the number box sits: Left or Right. The width of the box adapts to the number of digits in the maximum value. Colors and the label position come from the form’s appearance settings. Tooltip Text adds a question-mark icon next to the label with a short hint, for example the unit of the value.
The submitted number is stored in the form entries under the field’s label, and you can use it in the notification email with the field name in square brackets, for example [budget]. On the Conditionals tab, Conditional Logic shows or hides the slider based on answers in other fields. Tab Index applies to the number box.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Field Label | Enter the label for the input field. This is how users will identify individual fields. |
| Field Name | Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores. |
| Required Field | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
| Orientation | Range input field orientation. |
| Tooltip Text | The text to display as tooltip hint for the input. |
| Range Min Value | Minimum allowed value for range input type. |
| Range Max Value | Maximum allowed value for range input type. |
| Range Step Value | Incremental Value for range input type. |
| Default Value | Set default value for range input type. |
| Tab Index | Tab index for the form field. |
| CSS Class | Add a class for the form field. |
| CSS ID | Add an ID for the form field. |
Conditionals
| Heading | Description |
|---|---|
| Conditional Logic | Add conditional logic for the input field. |
Tips
- A slider always has a value, so the Default Value is submitted even when the visitor never touches it. Choose a starting point that cannot be mistaken for a real answer, or explain it in the label.
- Because of that, Required Field adds the asterisk to the label but cannot detect an untouched slider.
- Name the unit in the label or tooltip, for example “Budget in EUR”; the number box shows the bare number only.
- Keep the number of steps reasonable. A range from 0 to 10,000 in steps of 1 is hard to set with a finger; a larger step makes the slider easier to use.
- Use whole numbers for the step and the limits. The number box shows whole numbers only, so a step such as 0.5 does not display correctly.
- A value typed into the number box is kept within the minimum and maximum automatically.