Range
The Range component allows users to choose a value between a set of values.
Example
You can use the Range component to allow the user to express their opinion on a feedback questionnaire:
or to select a price limit:
Note: The Range component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Range component properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
Label | Enter the text you want to display above the component. | Yes |
Description | Add a description for the component. This is displayed under the Label. | No |
Hint | Enter a text under the component to give the user any additional information. Validation messages have priority and will hide the hint temporarily. | No |
Min. range value | Enter a number to be the minimum range value. The default value is set to 0. | Yes |
Max. range value | Enter a number to be the maximum range value. The default value is set to 100. | Yes |
Step size | Enter a number to specify the increment in value from one step to another. The default value is set to 5. | Yes |
Default value | Enter a number to be shown as the range default value. The handle displays in that position by default in the end-user app. | No |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
Display value | Select the preferred option from the drop-down to configure the visibility of the Range value on top of the handle. | No |
Markers | Select the preferred option from the drop-down to configure the visibility of the steps markers. This property displays the lines under the steps. | No |
Marker values | Select the preferred option from the drop-down to configure the visibility of the numeric value of each marker. | No |
Indicators | Turn on to display the indicators corresponding to the steps in the range track. | No |
Stops | Enter an array for custom Range stops. You can use templating. It overrides Step size property. To use strings in your Range create an array following this format [[0,"Disagree"],[50,"Not relevant"],[100,"Agree"]] . |
No |
Units | Append a unit to the Marker value property. | No |
Negative | Turn on to invert the colour coding in the range track. This property affects only the appearance of the component. | No |
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Disabled | Select the checkbox to disable the component in the end-user app. | No |
Add rule | You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. | No |
Read only | Select the checkbox to set the component to read-only. | No |
Add rule | You can set rules to prevent the user form editing the component using Liquid. If no rules are set, the component will be read-only in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Aria label | Enter a text that allows assistive technology to attach a label to the component. | No |
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |