Range
A slider input for selecting a numeric value within a defined range.
The Range field renders a horizontal slider that lets users pick a numeric value by dragging a handle between a minimum and maximum. It is ideal for ratings, budgets, satisfaction scores, or any value that benefits from a visual selection metaphor.
For the shared properties available on all fields (label, help, note, key, width, visual styling, required), see the Form Fields Overview.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| validations.min | number | 0 | Minimum value (left edge of the slider) |
| validations.max | number | 100 | Maximum value (right edge of the slider) |
| step | number | 1 | Increment between selectable values |
| defaultValue | number | 50 | Initial position of the slider handle |
Validation
The Range field extends InputFieldBase, so the required toggle is available. The slider inherently constrains the value to the min/max range, so out-of-range values are not possible through normal user interaction.
When the defaultValue is changed in the editor, it is automatically clamped to stay within the current min/max range.
Example Usage
A budget slider from 0 to 10,000 in increments of 500:
{
"type": "range",
"label": "Monthly Budget",
"required": true,
"validations": {
"min": 0,
"max": 10000
},
"step": 500,
"defaultValue": 5000
}