Skip to main content
All of the Volume components extend from @radix-ui/react-slider, and inherits all of the documentation for those child components.

​
Features

  • Conditional rendering based on volume status, customizable with the matcher pattern
  • Keyboard shortcuts and adheres to WAI-ARIA design patterns
  • Compatible with CSS animations for dynamic enter/exit animations

​
Anatomy

Import the components and piece the parts together. 
import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.MuteTrigger>
      <Player.VolumeIndicator />
    </Player.MuteTrigger>
    <Player.Volume>
      <Player.Track>
        <Player.Range />
      </Player.Track>
      <Player.Thumb />
    </Player.Volume>
  </Player.Root>
);

​
Usage

LiveIndicator provides a visual notification of live streaming, enabling viewers to easily discern the live status of the media.

​
Props

​
MuteTrigger

Accepts all props for a typical button element.

​
VolumeIndicator

forceMount
A boolean that, when set to true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries.
matcher
A prop intended to define the circumstances under which the VolumeIndicator should be visible. It can be a boolean matching the mute state or a function that provides custom logic for visibility determination based on the volume level.

​
Volume

​
forceMount

Keeps the component always mounted, aiding in managing animations.

​
Data Attributes

​
MuteTrigger

data-livepeer-mute-trigger
Identifies the mute toggle component within the media player setup.
data-muted
Shows whether the audio is currently muted ("true") or active ("false"), assisting in the visual representation and scripting based on the mute state.

​
VolumeIndicator

data-livepeer-controls-volume-indicator
Identifies the component’s role within the Player.
data-livepeer-muted
Indicates the mute state, "true" if muted and "false" otherwise.
data-livepeer-volume
Shows the current volume as a percentage, e.g., "50" for 50% volume.
data-visible
Indicates the visibility status of the indicator, with "true" meaning it’s currently visible based on the matcher or mute state and "false" denoting it’s not visible. This is often used for dynamically applying enter/exit CSS animations.

​
Volume

data-livepeer-controls-volume
Serves to identify the component’s role within the Player.
data-livepeer-muted
Indicates the mute state, "true" if muted and "false" otherwise.
data-livepeer-volume
Shows the current volume as a percentage, e.g., "50" for 50% volume.
data-visible
Reflects the visibility status of the slider, with "true" meaning it’s currently visible (i.e., volume change is supported) and "false" denoting it’s not visible.