Sliders

Slider Video

This component is used to load and display a preview video over the time slider.

# Usage

The <media-slider-video> component can be used to load a video in a slider. This is generally used to show a preview video (low-resolution) as the user interacts with the time slider.

The preview video will be displayed when the user is hovering over or dragging the time slider, and it will automatically be updated to be in-sync with the current pointer position. Therefore, ensure it has the same length as the original media (i.e., same duration) to avoid displaying incorrect previews.

          
1
2
3
4
5
6
7
8
9
		    

# Events

The native video canplay and error events are re-dispatched by this component for you to listen to if needed.

# Styling

You can override the default styles with CSS like so:

        /* Override default styles. */
media-slider-video {
}

/* Apply styles to <video> element part. */
media-slider-video [part='video'] {
  width: 156px;
}

/* Apply styles when video is loading. */
media-slider-video[data-loading] {
}

/* Apply styles when video fails to load. */
media-slider-video[aria-hidden='true'] {
}

      

# Tailwind

A complete Tailwind slider example is available in the <media-time-slider> docs.

# Component API