FrameworkStyle

VolumeSlider

A slider component for controlling media playback volume

Anatomy 

<VolumeSlider.Root />

Behavior

Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value.

Styling

Use CSS custom properties to style the fill and pointer levels: 

media-volume-slider::before {
  width: calc(var(--media-slider-fill) * 1%);
}

Accessibility

Renders with role="slider" and automatic aria-label of “Volume”. Override with the label prop. Keyboard controls:

  • Arrow Left / Arrow Right: step by step increment
  • Page Up / Page Down: step by largeStep increment
  • Home: set volume to 0
  • End: set volume to max

Examples

Nest sub-components for full control over the slider’s DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.

0%
 
import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

import './WithParts.css';

const Player = createPlayer({ features: videoFeatures });

export default function WithParts() {
  return (
    <Player.Provider>
      <Player.Container className="react-volume-slider-parts">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <MuteButton
          className="react-volume-slider-parts__mute-button"
          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
        />
        <VolumeSlider.Root className="react-volume-slider-parts__slider">
          <VolumeSlider.Track className="react-volume-slider-parts__track">
            <VolumeSlider.Fill className="react-volume-slider-parts__fill" />
          </VolumeSlider.Track>
          <VolumeSlider.Thumb className="react-volume-slider-parts__thumb" />
          <VolumeSlider.Value type="pointer" className="react-volume-slider-parts__value" />
        </VolumeSlider.Root>
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Root

Props

Prop Type Default
disabled boolean —
label string | function 'Volume'
largeStep number —
max number —
min number —
orientation 'horizontal' | 'vertical' —
step number —
thumbAlignment 'center' | 'edge' —
value number —

State

State is accessible via the render, className, and style props.

Property Type
value number
fillPercent number
pointerPercent number
dragging boolean
pointing boolean
interactive boolean
orientation 'horizontal' | 'vertical'
disabled boolean
thumbAlignment 'center' | 'edge'
muted boolean
volume number

CSS custom properties

Variable
--media-slider-fill
--media-slider-pointer

Fill

Displays the filled portion from start to the current value.

Preview

Positioning container for preview content that tracks the pointer along the slider.

Props

Prop Type Default
overflow SliderPreviewOverflow —

Data attributes

Attribute Type
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled

Thumb

Draggable handle for setting the slider value. Receives focus and handles keyboard interaction.

Data attributes

Attribute Type
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled

Track

Contains the slider's visual track and interactive hit zone.

Value

Displays a formatted text representation of the slider value. Renders an <output> element.

Props

Prop Type Default
format ((value: number) => string) —
type "current" | "pointer" —

Data attributes

Attribute Type
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled
VideoJS