<media-time-range>

The <media-time-range> component is used to indicate the current time position in the timeline of the media, and provides controls to seek to a new time in the media.

Hovering over the time range will show a preview time code by default, and if a track with a thumbnails VTT file is configured a preview thumbnail will be shown.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>

Adding a metadata text track labelled “thumbnails” (<track default label="thumbnails" kind="metadata" src="">) with a valid VTT file as src will enable the preview thumbnails on hover functionality.

<media-controller>
  <video 
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track
      default label="thumbnails" kind="metadata"
      src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.vtt"
    >
  </video>
  <media-control-bar>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>

Adding a chapters text track (<track default kind="chapters" src="">) with a valid VTT file as src will add hoverable chapters segments to the time range.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4"
  >
    <track default kind="chapters" src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/chapters.vtt">
    <track default kind="metadata" label="thumbnails" src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/storyboard.vtt">
  </video>
  <media-control-bar>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>

Custom current slot with arrow

Section titled Custom current slot with arrow

Add a time display component in the current slot that will slide along the timeline as the video progresses.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-time-range>
      <media-time-display slot="current"></media-time-display>
      <div part="arrow" slot="current"></div>
    </media-time-range>
  </media-control-bar>
</media-controller>

Set the preview slot to an empty element to remove the default preview elements.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-time-range>
      <span slot="preview"></span>
    </media-time-range>
  </media-control-bar>
</media-controller>

The <media-time-range> consists of several elements including an <input type="range"> element which can be tricky to style across browsers but the <media-time-range> component comes with targeted CSS variables that make this a breeze.

<style>
  media-time-range {
    --media-control-background: transparent;
    --media-control-hover-background: transparent;
    --media-range-track-border-radius: 3px;
    --media-range-thumb-opacity: .7;
    --media-preview-time-margin: 0 0 -15px;
  }
</style>
<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>

Discover all the available CSS variables.

The <media-time-range> will be updated with media UI attributes any time your media playback state changes. You can use these attributes to apply custom styles to your <media-time-range> element under different state conditions.

/* Make the background color yellow when paused */
media-time-range[mediapaused] {
  --media-control-background: yellow;
}

/* Make the background color red when loading (buffering) */
media-time-range[medialoading] {
  --media-control-background: red;
}

Discover all the available media UI attributes.

Name Description
preview An element that slides along the timeline to the position of the pointer hovering.
preview-arrow An arrow element that slides along the timeline to the position of the pointer hovering.
current An element that slides along the timeline to the position of the current time.
Name Type Description
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
aria-disabled
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name Type Description
mediabuffered string Set to the buffered time ranges.
mediaplaybackrate string Set to the media playback rate.
mediaduration string Set to the media duration.
mediaseekable string Set to the seekable time ranges.
mediapaused boolean Present if the media is paused.
medialoading boolean Present if the media is loading.
mediacurrenttime string Set to the current media time.
mediapreviewimage string Set to the timeline preview image URL.
mediapreviewtime string Set to the timeline preview time.
Name Description
box A CSS part that selects both the preview and current box elements.
preview-box A CSS part that selects the preview box element.
current-box A CSS part that selects the current box element.
arrow A CSS part that selects the arrow element.
Name Default Description
--media-time-range-display inline-block display property of range.
--media-preview-transition-property visibility, opacity transition-property of range hover preview.
--media-preview-transition-duration-out .25s transition-duration out of range hover preview.
--media-preview-transition-delay-out 0s transition-delay out of range hover preview.
--media-preview-transition-duration-in .5s transition-duration in of range hover preview.
--media-preview-transition-delay-in .25s transition-delay in of range hover preview.
--media-preview-thumbnail-background var(--_preview-background) background of range preview thumbnail.
--media-preview-thumbnail-box-shadow 0 0 4px rgb(0 0 0 / .2) box-shadow of range preview thumbnail.
--media-preview-thumbnail-max-width 180px max-width of range preview thumbnail.
--media-preview-thumbnail-max-height 160px max-height of range preview thumbnail.
--media-preview-thumbnail-min-width 120px min-width of range preview thumbnail.
--media-preview-thumbnail-min-height 80px min-height of range preview thumbnail.
--media-preview-thumbnail-border-radius var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0 border-radius of range preview thumbnail.
--media-preview-thumbnail-border border of range preview thumbnail.
--media-preview-chapter-background var(--_preview-background) background of range preview chapter display.
--media-preview-chapter-border-radius 0 border-radius of range preview chapter display.
--media-preview-chapter-padding 3.5px 9px 0 padding of range preview chapter display.
--media-preview-chapter-margin 0 margin of range preview chapter display.
--media-preview-chapter-text-shadow 0 0 4px rgb(0 0 0 / .75) text-shadow of range preview chapter display.
--media-preview-time-background var(--_preview-background) background of range preview time display.
--media-preview-time-border-radius 0 0 var(--media-preview-border-radius) var(--media-preview-border-radius) border-radius of range preview time display.
--media-preview-time-padding 3.5px 9px padding of range preview time display.
--media-preview-time-margin 0 margin of range preview time display.
--media-preview-time-text-shadow 0 0 4px rgb(0 0 0 / .75) text-shadow of range preview time display.
--media-box-display flex display of range box.
--media-box-margin 0 0 5px margin of range box.
--media-box-padding-left padding-left of range box.
--media-box-padding-right padding-right of range box.
--media-box-border-radius border-radius of range box.
--media-preview-box-display var(--media-box-display, flex) display of range preview box.
--media-preview-box-margin var(--media-box-margin, 0 0 5px) margin of range preview box.
--media-current-box-display var(--media-box-display, flex) display of range current box.
--media-current-box-margin var(--media-box-margin, 0 0 5px) margin of range current box.
--media-box-arrow-display inline-block display of range box arrow.
--media-box-arrow-background var(--_control-background) border-top-color of range box arrow.
--media-box-arrow-border-width var(--media-box-arrow-height, 5px) var(--media-box-arrow-width, 6px) 0 border-width of range box arrow.
--media-box-arrow-height 5px height of range box arrow.
--media-box-arrow-width 6px width of range box arrow.
--media-box-arrow-offset translateX offset of range box arrow.
--media-primary-color rgb(238 238 238) Default color of range bar.
--media-secondary-color rgb(20 20 30 / .7) Default color of range background.
--media-control-display inline-block display property of control.
--media-control-padding 10px padding of control.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .7)) background of control.
--media-control-hover-background rgb(50 50 70 / .7) background of control hover state.
--media-control-height 24px height of control.
--media-range-padding var(--media-control-padding, 10px) padding of range.
--media-range-padding-left var(--_media-range-padding) padding-left of range.
--media-range-padding-right var(--_media-range-padding) padding-right of range.
--media-range-thumb-width 10px width of range thumb.
--media-range-thumb-height 10px height of range thumb.
--media-range-thumb-border none border of range thumb.
--media-range-thumb-border-radius 10px border-radius of range thumb.
--media-range-thumb-background var(--media-primary-color, rgb(238 238 238)) background of range thumb.
--media-range-thumb-box-shadow 1px 1px 1px transparent box-shadow of range thumb.
--media-range-thumb-transition transition of range thumb.
--media-range-thumb-transform none transform of range thumb.
--media-range-thumb-opacity 1 opacity of range thumb.
--media-range-bar-color var(--media-primary-color, rgb(238 238 238)) color_value of range bar (elapsed progress).
--media-range-track-color transparent color_value of range track (remaining progress).
--media-range-track-backdrop-filter backdrop-filter of range track.
--media-range-track-width 100% width of range track.
--media-range-track-height 4px height of range track.
--media-range-track-border none border of range track.
--media-range-track-outline outline of range track.
--media-range-track-outline-offset outline-offset of range track.
--media-range-track-border-radius 1px border-radius of range track.
--media-range-track-box-shadow none box-shadow of range track.
--media-range-track-transition transition of range track.
--media-range-track-translate-x 0px translate x-coordinate of range track.
--media-range-track-translate-y 0px translate y-coordinate of range track.
--media-range-track-background rgb(255 255 255 / .2) background of range track background.
--media-range-track-background-backdrop-filter backdrop-filter of range track background.
--media-time-range-hover-display block display of range hover zone.
--media-time-range-hover-bottom -5px bottom of range hover zone.
--media-time-range-hover-height max(100% + 5px, 20px) height of range hover zone.
--media-range-track-pointer-background background of range track pointer.
--media-range-track-pointer-border-right border-right of range track pointer.