ef-trim-handles

Renders draggable in/out handles with dimmed overlay regions. Fires trim-change events as the user drags. Typically layered over an ef-thumbnail-strip.

<div style="position: relative; height: 56px;">
  <ef-thumbnail-strip target="my-video" use-intrinsic-duration thumbnail-height="56"
    style="display: block; width: 100%; height: 56px;"></ef-thumbnail-strip>
  <ef-trim-handles intrinsic-duration-ms="5000" seek-target="my-video"
    style="position: absolute; inset: 0;"></ef-trim-handles>
</div>

document.querySelector('ef-trim-handles').addEventListener('trim-change', (e) => {
  const { startMs, endMs } = e.detail.value;
});

CSS custom properties: