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
showValuebooleanDisplay current value next to slider
valuePrefixstringPrefix string for displayed value
valueSuffixstringSuffix string for displayed value
hintstringHelper text below the field

Bootstrap Bootstrap
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
size'sm' | 'lg'Input size
floatingLabelbooleanUse Bootstrap floating label
displayMonthsnumberNumber of months to display
navigation'select' | 'arrows' | 'none'Calendar navigation style
showWeekNumbersbooleanShow week numbers in calendar
hintstringHelper text below the field

Bootstrap Bootstrap
Loading live example