ef-trim-handles

Draggable start/end trim handles. Overlays onto a thumbnail strip or track.

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

Attribute	React prop	Type	Default	Description
`element-id`	`elementId`	`string`	`""`	ID of the element these trim handles edit, included in the `trim-change` event detail.
`intrinsic-duration`	`intrinsicDuration`	`number`	—	Untrimmed source duration in seconds, used to compute drag bounds.
`mode`	`mode`	`standalone` \| `track`	—	`standalone` (full overlay + draggable region) or `track` (handles pinned at container edges, for use inside a timeline track).
`pixels-per-second`	`pixelsPerSecond`	`number \| null`	—	Zoom level — pixels rendered per second of composition time.
`seek-target`	`seekTarget`	`string`	`""`	ID of a temporal element to seek as the user drags a handle.
`show-overlays`	`showOverlays`	`boolean`	`true`	Shows dimmed overlays over the trimmed-away portions.

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

Events:

Event	Detail	Description
`trim-change`	`{ elementId: string; type: "start" \| "end" \| "region"; value: { start: number; end: number } }`	Fires continuously while the user drags a trim handle or the region.
`trim-change-end`	`{ elementId: string; type: "start" \| "end" \| "region" }`	Fires once when the user releases a trim handle drag.

CSS custom properties:

Property	Default	Description
`--trim-handle-active-color`	`#3b82f6`	Handle color while hovered or dragging.
`--trim-handle-border-radius-end`	`0 2px 2px 0`	Border radius of the end (right) handle's visible knob.
`--trim-handle-border-radius-start`	`2px 0 0 2px`	Border radius of the start (left) handle's visible knob.
`--trim-handle-color`	`rgba(255, 255, 255, 0.7)`	Handle color at rest.
`--trim-handle-width`	`8px`	Width of each trim handle's hit area.
`--trim-overlay-color`	`rgba(0, 0, 0, 0.4)`	Color of the dimmed overlay drawn over trimmed-away regions.
`--trim-selected-border-color`	`transparent`	Color of the selection indicator border (standalone mode).
`--trim-selected-border-width`	`0px`	Thickness of the selection indicator border (standalone mode).

--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.

CSS Parts

Part	Description
`handle`	Both trim handles (start and end).
`handle-end`	End (right) trim handle.
`handle-inner`	Visible knob inside each trim handle.
`handle-start`	Start (left) trim handle.
`overlay`	Both dimmed overlays covering trimmed-away portions.
`overlay-end`	Dimmed overlay covering the trimmed-away end portion.
`overlay-start`	Dimmed overlay covering the trimmed-away start portion.
`region`	Draggable middle region (standalone mode only).
`selected-border`	Selection indicator borders (standalone mode only).
`selected-border-bottom`	Bottom selection indicator border.
`selected-border-top`	Top selection indicator border.

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

Slots

Slot	Description
`handle-end`	Custom content for the end (right) trim handle's visible knob.
`handle-start`	Custom content for the start (left) trim handle's visible knob.