Specialized controls for numeric ranges and date selection.
slider
Numeric range selection.
{
key: 'volume',
type: 'slider',
label: 'Volume',
value: 50,
minValue: 0, // optional
maxValue: 100, // optional
step: 5, // optional
}Core Properties (all optional):
minValue: Minimum slider valuemaxValue: Maximum slider valuestep: Step increment value
Adapter Props
| Prop | Type | Description |
|---|---|---|
range | boolean | Enable dual-handle range mode |
orientation | 'horizontal' | 'vertical' | Slider orientation |
styleClass | string | Additional CSS class |
hint | string | Helper text below the field |
datepicker
Date selection control.
{
key: 'birthDate',
type: 'datepicker',
label: 'Birth Date',
value: null,
required: true,
minDate: new Date(1900, 0, 1), // optional
maxDate: new Date(), // optional
placeholder: 'Select your birth date',
}Core Properties (all optional):
minDate: Minimum selectable date (Date | string | null)maxDate: Maximum selectable date (Date | string | null)startAt: Initial calendar view date (Date | null)placeholder: Placeholder text (at field level, not in props)
Adapter Props
| Prop | Type | Description |
|---|---|---|
dateFormat | string | Date format string (e.g. dd/mm/yy) |
inline | boolean | Always show calendar inline |
showIcon | boolean | Show calendar icon button |
showButtonBar | boolean | Show Today/Clear buttons |
selectionMode | 'single' | 'multiple' | 'range' | Date selection mode |
touchUI | boolean | Use touch-optimized UI |
view | 'date' | 'month' | 'year' | Calendar view mode |
hint | string | Helper text below the field |