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 value
  • maxValue: Maximum slider value
  • step: Step increment value

Adapter Props

PropTypeDescription
rangebooleanEnable dual-handle range mode
orientation'horizontal' | 'vertical'Slider orientation
styleClassstringAdditional CSS class
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example

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

PropTypeDescription
dateFormatstringDate format string (e.g. dd/mm/yy)
inlinebooleanAlways show calendar inline
showIconbooleanShow calendar icon button
showButtonBarbooleanShow Today/Clear buttons
selectionMode'single' | 'multiple' | 'range'Date selection mode
touchUIbooleanUse touch-optimized UI
view'date' | 'month' | 'year'Calendar view mode
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example