# EuiTimeRangepickerComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage (Internal Component)</h3>
<p>This component is typically used internally by <code>eui-date-range-selector</code> when <code>isTimeRange</code> is enabled.
It&#39;s dynamically created and configured via the portal system.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-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) =&gt; {
    console.log(&#39;Time range changed&#39;);
  }
};</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Each time picker has accessible labels for start and end times</li>
<li>Keyboard navigation supported through underlying timepicker components</li>
<li>Time values announced to screen readers on change</li>
<li>Step increments help users select valid time values</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically created by <code>eui-date-range-selector</code> when time selection enabled</li>
<li>Displays two timepickers side-by-side for start and end times</li>
<li>Callback invoked on any time value change</li>
<li>Supports hours, minutes, and optional seconds</li>
<li>Step values control increment/decrement behavior</li>
<li>Labels automatically translated via TranslateService</li>
</ul>


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

**Standalone:** false
