Skip to main content
VolumeSlider 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.

​
Sub-components

All Slider.* sub-components are available inside VolumeSlider via the shared slider context.
ComponentDescription
VolumeSlider.RootRoot slider element. Manages volume state and keyboard controls.
Requires the volume feature to be registered with the player.

​
Import

import { VolumeSlider, Slider } from '@videojs/react';

​
Basic Usage

import { VolumeSlider, Slider } from '@videojs/react';

function PlayerControls() {
  return (
    <VolumeSlider.Root className="volume-slider">
      <Slider.Track className="slider-track">
        <Slider.Fill className="slider-fill" />
      </Slider.Track>
      <Slider.Thumb className="slider-thumb" />
      <Slider.Preview className="slider-preview">
        <Slider.Value type="pointer" className="slider-value" />
      </Slider.Preview>
    </VolumeSlider.Root>
  );
}

​
VolumeSlider.Root Props

​
label
string
Override the default aria-label of "Volume". Used by screen readers to identify the slider.
​
step
number
Step size for arrow key navigation (0–100 scale). Defaults to 5.
​
largeStep
number
Large step size for Page Up / Page Down key navigation. Defaults to 10.
​
orientation
"horizontal" | "vertical"
Slider orientation. Defaults to "horizontal".
​
disabled
boolean
Disables the slider.
​
thumbAlignment
string
Controls how the thumb aligns relative to the track at min/max positions.
​
onDragStart
() => void
Called when the user begins dragging the slider thumb.
​
onDragEnd
() => void
Called when the user releases the slider thumb after dragging.
​
className
string | ((state: VolumeSliderRoot.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: VolumeSliderRoot.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.
​
render
ReactElement | ((props: HTMLProps, state: VolumeSliderRoot.State) => ReactElement | null)
Custom render prop for the root element.

​
State Data Attributes

AttributeValue / Description
data-pointingPresent while the pointer is hovering over the slider.
data-interactivePresent when the user is interacting (pointing or dragging).
data-draggingPresent while the thumb is being dragged.
data-orientation"horizontal" | "vertical" — reflects the orientation prop.

​
CSS Styling Example

.volume-slider {
  position: relative;
  height: 4px;
}

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

.slider-thumb {
  left: calc(var(--media-slider-fill) * 1%);
}

​
Accessibility

Renders with role="slider" and automatic aria-label of "Volume". Keyboard controls:
  • Arrow Left / Arrow Right: step by step amount
  • Page Up / Page Down: step by largeStep amount
  • Home: set volume to 0
  • End: set volume to maximum

Build docs developers (and LLMs) love

Get started for freeTalk to us