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 SliderCore.defaultProps.disabled
label string | function 'Volume'
largeStep number SliderCore.defaultProps.largeStep
orientation 'horizontal' | 'vertical' SliderCore.defaultProps.orientation
step number SliderCore.defaultProps.step
thumbAlignment 'center' | 'edge' SliderCore.defaultProps.thumbAlignment

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.

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.

Data attributes

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

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