FrameworkStyle

TimeSlider

A slider component for seeking through media content

Features

  • Supports both horizontal and vertical orientations
  • Displays current playback position
  • Shows preview position on hover
  • Keyboard accessible (Arrow keys for seeking)
  • Touch-friendly drag interaction

Live Example

Usage

Component 

import { TimeSlider } from '@videojs/react';
import styles from './TimeSlider.module.css';

/**
 * Basic TimeSlider example demonstrating:
 * - Progress and pointer visualization
 * - Horizontal orientation
 * - CSS Modules for scoped styling
 * - Data attribute selectors for state-based styling
 *
 * Note: This component must be used within a MediaProvider context.
 * See the usage example in the documentation.
 */
export function BasicTimeSlider() {
  return (
    <TimeSlider.Root className={styles.root} orientation="horizontal">
      <TimeSlider.Track className={styles.track}>
        <TimeSlider.Progress className={styles.progress} />
        <TimeSlider.Pointer className={styles.pointer} />
      </TimeSlider.Track>
      <TimeSlider.Thumb className={styles.thumb} />
    </TimeSlider.Root>
  );
}

CSS Module 

.root {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal orientation */
.root[data-orientation='horizontal'] {
  width: 100%;
  min-width: 100px;
  height: 20px;
}

/* Vertical orientation */
.root[data-orientation='vertical'] {
  width: 20px;
  height: 100px;
  flex-direction: column;
}

.track {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Horizontal track */
.track[data-orientation='horizontal'] {
  width: 100%;
  height: 0.375rem;
}

/* Vertical track */
.track[data-orientation='vertical'] {
  width: 0.375rem;
  height: 100%;
}

.progress {
  background-color: #007bff;
  border-radius: inherit;
  position: absolute;
}

.pointer {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  pointer-events: none;
}

.thumb {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 150ms ease;
}

.thumb:hover {
  transform: scale(1.2);
}

Compound Components

TimeSlider is composed of multiple sub-components:

TimeSlider.Root

The container component that manages state and interactions.

Props:

  • orientation?: 'horizontal' | 'vertical' - Slider orientation (default: ‘horizontal’)
  • All standard div props

TimeSlider.Track

The background track element that contains progress and pointer indicators.

TimeSlider.Progress

Visual indicator showing how much of the media has been played.

TimeSlider.Pointer

Shows the hover/preview position when user moves cursor over the slider.

TimeSlider.Thumb

The draggable handle that indicates and controls the current playback position.

Data Attributes

The TimeSlider automatically sets data attributes:

  • data-orientation - Current orientation (‘horizontal’ or ‘vertical’)
  • data-current-time - Current playback time in seconds
  • data-duration - Total media duration in seconds

Use these attributes for state-based styling in your CSS.

CSS Variables

The component exposes CSS variables for positioning:

  • --slider-fill - Percentage of progress (0-100%)
  • --slider-pointer - Percentage of pointer position (0-100%)

Accessibility

  • Includes proper ARIA role (slider)
  • Keyboard accessible (Arrow keys, Home, End)
  • Screen reader announcements for time values
  • Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
VideoJS