Sliders

Time Slider

This component is used to create a range input for controlling the current time of playback.

# Usage

The <media-time-slider> component receives time updates from the provider through the media store, and actively dispatches a media-seeking-request event (throttled to once per 100ms) as the slider value changes.

Seeking requests let the player 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 media-seek-request event will be fired to request updating the current playback time to the slider's value.

The time slider's range is represented as a percentage 0% (min) and 100% (max). Internally percentages are used to calculate time positions where 100% is equal to the length of the media (i.e., duration).

          
1
2
3
4
		    

# Preview

The preview slot enables passing in any element to be displayed above the slider thumb when being interacted with:

          
1
2
3
		    

# Grouping

Previews can be grouped by using a parent container element for the preview slot:

          
1
2
3
4
5
6
7
8
		    

# Chapters

Chapters are set by providing a WebVTT file that specifies the time ranges and respective chapter titles. It should look something like this:

        WEBVTT

00:00:00 --> 00:01:13
The Forest

00:01:13 --> 00:02:31
Camp Site

...

      

The time slider supports showing the current chapters text track that has a mode of showing:

          
1
2
3
4
5
6
7
		    

# Title

The chapter-title part attribute can be added to any element inside the time slider. When found, the current chapter title that is active or being previewed will be inserted inside of it:

# Keyboard

The time slider will receive keyboard input when focused. The interaction keys are based on standard accessibility guidelines.

The key-step and shift-key-multiplier can be used to configure how much to seek backward/forward by on key press like so:

In the snippet above, each keyboard step (e.g., pressing left or right arrow key) will respectively seek backward/forward by 5 seconds. Holding shift will multiply by the step by 2, so a change of 10 seconds.

👉 You can configure global seek keys on the player.

# Styling

You can override the default styles with CSS like so:

        media-time-slider {
}

/* Apply styles when device pointer is within slider bounds. */
media-time-slider[data-pointing] {
}

/* Apply styles when slider thumb is being dragged. */
media-time-slider[data-dragging] {
}

/* Shorthand for both dragging and pointing. */
media-time-slider[data-interactive] {
}

/* Apply styles when at live edge. */
media-player[data-live-edge] media-time-slider {
}

/** Apply styles to preview. */
media-time-slider [slot='preview'] {
}

      

# Parts

        /* Apply styles to all tracks. */
media-time-slider [part~='track'] {
}

/* Apply styles to track when interactive. */
media-time-slider[data-interactive] [part~='track'] {
}

/* Apply styles to track fill (played portion of slider). */
media-time-slider [part~='track-fill'] {
}

/* Apply styles to track fill when at live edge. */
media-player[data-live-edge] media-time-slider [part~='track-fill'] {
}

/* Apply styles to track progress (buffered). */
media-time-slider [part~='track-progress'] {
}

/* Apply styles to thumb container. */
media-time-slider [part='thumb-container'] {
}

/* Apply styles to slider thumb. */
media-time-slider [part='thumb'] {
}

      

# Focus

        media-time-slider {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles to slider when focused via keyboard. */
media-time-slider[data-focus] {
}

/* Apply styles to slider track when focused via keyboard. */
media-time-slider[data-focus] [part='track'] {
}

      

# Chapters

        /* Apply styles to slider when chapters are available. */
media-time-slider[data-chapters] {
}

media-time-slider [part='chapter-container'] {
  margin-right: 2px;
}

/* Apply styles to chapter when container is hovered. */
media-time-slider [part='chapter-container']:hover [part='chapter'] {
  transform: scaleY(1.75);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}

media-time-slider [part='chapter'] {
}

media-time-slider [part='chapter-title'] {
}

      

# CSS Variables

See the slider CSS variables for simple customization of the default slider styles.

# Tailwind

A complete time slider example built with Tailwind:

# Component API