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 properties

The following table describes the main properties of the component.

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 JS.

Styles properties

The following table describes the styles properties of the component.

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

Note: The Align property in Columns is set to Stretch by default, so the component will take all the available width. To change that, set the Align property to Left, Center or Right.

Interactions properties

The following table describes the interactions properties of the component.

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 JS. 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 JS. 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 JS. 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 properties

The following table describes the accessibility properties of the component.

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