Editor
ef-scrubber
This element is a playhead scrubber.
This element is a playhead scrubber.
Attributes
9 of 9
container-width
- React prop
containerWidth- Type
number- Default
- —
- Description
- Explicit container width in pixels, used in vertical orientation.
current-time-ms
- React prop
currentTimeMs- Type
number- Default
- —
- Description
- Current playback time in milliseconds.
duration-ms
- React prop
durationMs- Type
number- Default
- —
- Description
- Total duration in milliseconds.
fps
- React prop
fps- Type
number- Default
- —
- Description
- Frame rate used for frame-quantized calculations.
orientation
- React prop
orientation- Type
horizontal | vertical- Default
- —
- Description
- Layout direction.
pixels-per-second
- React prop
pixelsPerSecond- Type
number- Default
- —
- Description
- Zoom level — pixels rendered per second of composition time.
raw-scrub-time-ms
- React prop
rawScrubTimeMs- Type
number | null- Default
- —
- Description
- Unquantized scrub position in milliseconds, updated live during a drag.
target
- React prop
target- Type
string- Default
""- Description
- ID of the target element this component controls or reads from.
zoom-scale
- React prop
zoomScale- Type
number- Default
- —
- Description
- Zoom multiplier applied to vertical (timeline) scrubber sizing.
CSS Parts
CSS parts| Part | Description |
|---|
handle | This part is the draggable circular knob. |
playhead | This part is the vertical line at the current time position. |
progress | This part is the filled portion. It shows the current position. |
scrubber | This part is the outer track container. |
CSS Custom Properties
CSS custom properties| Property | Default | Description |
|---|
--ef-scrubber-background | var(--ef-color-border, rgba(255, 255, 255, 0.2)) | Unfilled track color. |
--ef-scrubber-handle-size | 12px | Diameter of the draggable handle. |
--ef-scrubber-height | 4px | Track thickness. |
--ef-scrubber-progress-color | var(--ef-color-primary, #fff) | Filled (progress) track color. |
Events
Events| Event | Detail | Description |
|---|
seek | number | This event fires when the user drags the scrubber to a new position. |