FrameworkStyle

VolumeSlider

A slider component for controlling media volume

Features

  • Supports both horizontal and vertical orientations
  • Displays current volume level
  • Reflects muted state
  • Keyboard accessible (Arrow keys for volume adjustment)
  • Touch-friendly drag interaction

Live Example

Usage

Component 

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

/**
 * Basic VolumeSlider example demonstrating:
 * - Volume level 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 BasicVolumeSlider() {
  return (
    <VolumeSlider.Root className={styles.root} orientation="horizontal">
      <VolumeSlider.Track className={styles.track}>
        <VolumeSlider.Progress className={styles.progress} />
      </VolumeSlider.Track>
      <VolumeSlider.Thumb className={styles.thumb} />
    </VolumeSlider.Root>
  );
}

CSS Module 

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

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

/* Vertical orientation */
.root[data-orientation='vertical'] {
  width: 20px;
  height: 80px;
  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;
}

.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

VolumeSlider is composed of multiple sub-components:

VolumeSlider.Root

The container component that manages state and interactions.

Props:

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

VolumeSlider.Track

The background track element that contains the progress indicator.

VolumeSlider.Progress

Visual indicator showing the current volume level.

VolumeSlider.Thumb

The draggable handle that indicates and controls the current volume level.

Data Attributes

The VolumeSlider automatically sets data attributes:

  • data-orientation - Current orientation (‘horizontal’ or ‘vertical’)
  • data-muted - Present when volume is muted
  • data-volume-level - Volume level category: ‘high’ (>50%), ‘medium’ (25-50%), ‘low’ (1-24%), or ‘off’ (0%)

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

CSS Variables

The component exposes CSS variables for positioning:

  • --slider-fill - Percentage of volume level (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 volume values
  • Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
VideoJS