Use the Range slider form element to add a slider to your Component form. 

For more information about creating editable components, see Create an editable component.

Locating the range slider form element

To find the Range slider form element:

1. Navigate to a component
2. Click the + button on the Component form builder
3. Within the Fields tab, look for the Range slider form element.

The Range slider element includes the following fields:

Title field

• Provide a name for the form element. Important: This will be displayed in your component form.

Field settings

• Min value - Input the minimum value that the Range slider can be set too
• Max value - Input the maximum value that the Range slider can be set too
• Increments - Input the increments that the Range slider can increase and decrease by
• Unit - Input the unit for the Range slide to use.
  When using the Range slider with Style guides, if no unit set pixels will be assumed and converted to REMs.

Default

• Default value (optional) - Set a default value for the Range slider.

Tooltip

• Tooltip text - Enter tooltip text here.
• Tooltip placement - Define the position of the tooltip on hover of the field.

Range slider form element

Use the Range slider form element to add a slider to your Component form. 

For more information about creating editable components, see Create an editable component.

Locating the range slider form element

To find the Range slider form element:

1. Navigate to a component
2. Click the + button on the Component form builder
3. Within the Fields tab, look for the Range slider form element.

The Range slider element includes the following fields:

Title field

• Provide a name for the form element. Important: This will be displayed in your component form.

Field settings

• Min value - Input the minimum value that the Range slider can be set too
• Max value - Input the maximum value that the Range slider can be set too
• Increments - Input the increments that the Range slider can increase and decrease by
• Unit - Input the unit for the Range slide to use.
  When using the Range slider with Style guides, if no unit set pixels will be assumed and converted to REMs.

Default

• Default value (optional) - Set a default value for the Range slider.

Tooltip

• Tooltip text - Enter tooltip text here.
• Tooltip placement - Define the position of the tooltip on hover of the field.