<media-volume-range>

The <media-volume-range> component is used to indicate the current volume level of the media and provide a control to change the volume level.

The component will be updated automatically based on the volume level and volume availability.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>

The <media-volume-range> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the volume changes or volume availability is updated.

You can use these attributes to style the button. For example, if volume is unavailable, perhaps on an iPhone, hide the volume range:

media-volume-range[mediavolumeunavailable] {
  display: none;
}

Or, set the background color to red if the media is muted:

media-volume-range[mediamuted] {
  --media-control-background: red;
 }

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.