Editor

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.

html

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

css

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

Attributes

Filter attributes6 of 6

`element-id`

React prop: elementId
Type: string
Default: ""
Description: ID of the element these trim handles edit, included in the trim-change event detail.

`intrinsic-duration`

React prop: intrinsicDuration
Type: number
Default: —
Description: Untrimmed source duration in seconds, used to compute drag bounds.

`mode`

React prop: mode
Type: standalone | track
Default: —
Description: standalone (full overlay + draggable region) or track (handles pinned at container edges, for use inside a timeline track).

`pixels-per-second`

React prop: pixelsPerSecond
Type: number | null
Default: —
Description: Zoom level — pixels rendered per second of composition time.

`seek-target`

React prop: seekTarget
Type: string
Default: ""
Description: ID of a temporal element to seek as the user drags a handle.

`show-overlays`

React prop: showOverlays
Type: boolean
Default: true
Description: Shows dimmed overlays over the trimmed-away portions.

Slots

Slots
Slot	Description
`handle-end`	This slot holds custom content for the end trim handle's visible knob. The end handle sits on the right.
`handle-start`	This slot holds custom content for the start trim handle's visible knob. The start handle sits on the left.

CSS Parts

CSS parts
Part	Description
`handle`	This part matches both trim handles, the start handle and the end handle.
`handle-end`	This part is the end trim handle, on the right.
`handle-inner`	This part is the visible knob inside each trim handle.
`handle-start`	This part is the start trim handle, on the left.
`overlay`	This part matches both dimmed overlays. Each overlay covers a trimmed-away portion.
`overlay-end`	This part is the dimmed overlay over the trimmed-away end portion.
`overlay-start`	This part is the dimmed overlay over the trimmed-away start portion.
`region`	This part is the draggable middle region. It appears only in standalone mode.
`selected-border`	This part matches the selection indicator's borders. They appear only in standalone mode.
`selected-border-bottom`	This part is the bottom border of the selection indicator.
`selected-border-top`	This part is the top border of the selection indicator.

CSS Custom Properties

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

Events

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