<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.

Default usage

<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>

Open Sandbox

Preview thumbnails

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>

Open Sandbox

Chapters

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>

Open Sandbox

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>

Open Sandbox

Remove preview elements

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>

Open Sandbox

Styling

Using CSS variables

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>

Open Sandbox

Discover all the available CSS variables.

Using attributes

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.

Reference

Slots

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.

Attributes

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).

Media UI Attributes

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.

CSS Parts

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.

CSS Variables

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.