Range / Slider
A slider input for selecting a numeric value within a defined range.
Overview
The Range / Slider field provides a draggable slider for selecting a number between a minimum and maximum value. It is ideal for satisfaction scales, budget ranges, quantity selectors, and any scenario where the relative position within a range is more intuitive than typing a number.
The current value is displayed next to the slider and updates in real time as the user drags. You can configure tick marks and value labels at specific points along the range.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| min | number | 0 | Minimum value of the range. |
| max | number | 100 | Maximum value of the range. |
| step | number | 1 | Increment between selectable values. |
| showValue | boolean | true | Display the current numeric value beside the slider. |
| showTicks | boolean | false | Render tick marks along the slider track. |
JSON Schema
{
"type": "range",
"label": "Budget (USD)",
"name": "budget",
"required": true,
"min": 0,
"max": 10000,
"step": 500,
"defaultValue": 2500,
"showValue": true,
"showTicks": false
}