# EuiTimeRangepickerComponent

**Type:** component



Provides a dual time picker interface for selecting start and end times within a time range.
Typically used within date range selection workflows where time precision is required.
Receives configuration via DYNAMIC_COMPONENT_CONFIG injection token and invokes a callback
whenever either time value changes.

### Basic Usage (Internal Component)
This component is typically used internally by `eui-date-range-selector` when `isTimeRange` is enabled.
It's dynamically created and configured via the portal system.

```typescript
// Configuration passed to component
const config: EuiTimeRangePickerConfig = {
  hours: 9,
  mins: 0,
  secs: 0,
  endHours: 17,
  endMins: 30,
  endSecs: 0,
  hasSeconds: false,
  stepHours: 1,
  stepMinutes: 15,
  stepSeconds: 1,
  callback: (h, m, s, eh, em, es) => {
    console.log('Time range changed');
  }
};
```

### Accessibility
- Each time picker has accessible labels for start and end times
- Keyboard navigation supported through underlying timepicker components
- Time values announced to screen readers on change
- Step increments help users select valid time values

### Notes
- Automatically created by `eui-date-range-selector` when time selection enabled
- Displays two timepickers side-by-side for start and end times
- Callback invoked on any time value change
- Supports hours, minutes, and optional seconds
- Step values control increment/decrement behavior
- Labels automatically translated via TranslateService


**Selector:** `eui-time-range-picker`