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;
});

--trim-handle-color, --trim-handle-active-color, and --trim-overlay-color are part of the shared theme (ef-theme.css) rather than local to this component — override them globally, or scope an override to a specific ef-trim-handles instance the same way.

ef-trim-handles::part(handle-inner) { background: #e94560; }

Attributes

Slots

CSS Parts

CSS Custom Properties

Events