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

Example

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>
  );
}

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

<media-volume-slider-root orientation="horizontal">
  <media-volume-slider-track>
    <media-volume-slider-progress></media-volume-slider-progress>
  </media-volume-slider-track>
  <media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider-root>

<media-volume-slider-root orientation="vertical">
  <media-volume-slider-track>
    <media-volume-slider-progress></media-volume-slider-progress>
  </media-volume-slider-track>
  <media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider-root>

media-volume-slider-root {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Vertical orientation */
media-volume-slider-root[data-orientation='vertical'] {
  width: 20px;
  height: 80px;
  flex-direction: column;
}

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

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

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

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

media-volume-slider-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;
}

media-volume-slider-root:hover media-volume-slider-thumb {
  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