UI
Time Slider
This component is used to create a range input for controlling the current time of playback.
Import
Usage
The <vds-time-slider>
component (aka scrubber) extends <vds-slider>
, and two-way binds the slider's value with the provider's current playback time position.
The slider receives time updates from the provider through the media store, and it'll actively dispatch a vds-seeking-request
event (throttled to once per 100ms
) as the slider value changes. Seeking requests let the media controller know that the user is actively seeking, but they haven't determined the final playback position they want to seek to. When the user stops dragging the slider, a vds-seek-request
event will be fired to request updating the current playback time to the slider's value.
The slider's range is assumed to be in seconds between 0
(min) and length of media (max).
Styling
In the following example, we add a conventional time slider inside some media: