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

Compose NgForgeField via hostDirectives and register the field type with valueFieldMapper. See Building an Adapter for the full guide. 

// my-slider.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type SliderField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-slider',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MySliderComponent {
  protected readonly ngf = injectNgForgeField<number>();
  readonly props = input<SliderField['props']>();
}

// my-slider.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';

export const MySliderType: FieldTypeDefinition = {
  name: 'slider',
  loadComponent: () => import('./my-slider.component'),
  mapper: valueFieldMapper,
};

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

Core Props:

  • placeholder: Placeholder text
  • format: Date format string (UI-integration specific)

Adapter Props

Compose NgForgeField via hostDirectives and register the field type with datepickerFieldMapper. See Building an Adapter for the full guide. 

// my-datepicker.component.ts
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import {
  injectNgForgeField,
  NgForgeControl,
  NgForgeFieldHost,
  type DatepickerField,
} from '@ng-forge/dynamic-forms/integration';

@Component({
  selector: 'my-datepicker',
  imports: [NgForgeControl],
  hostDirectives: [NgForgeFieldHost],
  template: `<!-- mark the control element with ngForgeControl so meta + aria land there -->`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class MyDatepickerComponent {
  protected readonly ngf = injectNgForgeField<string>();
  readonly props = input<DatepickerField['props']>();
}

// my-datepicker.type.ts
import type { FieldTypeDefinition } from '@ng-forge/dynamic-forms';
import { datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';

export const MyDatepickerType: FieldTypeDefinition = {
  name: 'datepicker',
  loadComponent: () => import('./my-datepicker.component'),
  mapper: datepickerFieldMapper,
};