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:
- Navigate to a component
- Click the + button on the Component form builder
- Within the Fields tab, look for the Range slider form element.
The Range slider element includes the following fields:
Field name
- Field label - Provide a name for the form element. The field label will be displayed above the field in your component form. Important: It will also be used to auto-generate the field machine name. Auto generation only occurs until you have clicked Apply.
- Machine name - Set the machine name of the field. Used as a token when linking an element to the field. Must be unique within the component. Important: If you need to change the machine name later, click the Edit icon on the field's right.
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.
Visibility
- Show field if - Enter conditional logic to show / hide the field based on the value of another field. For more, see Component fields conditional visibility.
Tooltip
- Tooltip text - Enter tooltip text here.
- Tooltip placement - Define the position of the tooltip on hover of the field.
