ef-scrubber
This element is a playhead scrubber.
This element is a playhead scrubber.
Attributes
| Attribute | React prop | Type | Default | Description |
|---|---|---|---|---|
container-width | containerWidth | number | — | Explicit container width in pixels, used in vertical orientation. |
current-time-ms | currentTimeMs | number | — | Current playback time in milliseconds. |
duration-ms | durationMs | number | — | Total duration in milliseconds. |
fps | fps | number | — | Frame rate used for frame-quantized calculations. |
orientation | orientation | horizontal | vertical | — | Layout direction. |
pixels-per-second | pixelsPerSecond | number | — | Zoom level — pixels rendered per second of composition time. |
raw-scrub-time-ms | rawScrubTimeMs | number | null | — | Unquantized scrub position in milliseconds, updated live during a drag. |
target | target | string | "" | ID of the target element this component controls or reads from. |
zoom-scale | zoomScale | number | — | Zoom multiplier applied to vertical (timeline) scrubber sizing. |
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
| 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
| Event | Detail | Description |
|---|---|---|
seek | number | This event fires when the user drags the scrubber to a new position. |