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:

Range component

or to select a price limit:

Range component

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