> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Volume

> The `Volume`, `VolumeIndicator`, and `MuteTrigger` components provide interactive controls for the volume level.

<iframe
  src={`https://ui-kit-docs-embed.vercel.app/player/volume`}
  height="600px"
  width="100%"
  frameBorder="0"
  allowFullScreen
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
  style={{
borderRadius: 10,
backgroundColor: "black",
}}
/>

<Info>
  All of the `Volume` components extend from
  [`@radix-ui/react-slider`](https://www.radix-ui.com/primitives/docs/components/slider),
  and inherits all of the documentation for those components.
</Info>

## Features

* Conditional rendering based on volume status, customizable with the `matcher`
  pattern
* Keyboard shortcuts and adheres to [WAI-ARIA](https://w3c.github.io/aria/)
  design patterns
* Compatible with CSS animations for dynamic enter/exit animations
* Persists to `localStorage` by default (with storage overrides customizable in
  `Root`)

## Anatomy

Import the components and piece the parts together.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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>
);
```

## 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.