<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;
 }
Name Type Description
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
aria-disabled
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

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.

Name Type Description
mediavolume string Set to the media volume.
mediamuted boolean Set to the media muted state.
mediavolumeunavailable string Set if changing volume is unavailable.
Name Description
track The runnable track of the range.
progress The progress part of the track.
thumb The thumb of the range.
Name Default Description
--media-volume-range-display inline-block display property of range.
--media-primary-color rgb(238 238 238) Default color of range bar.
--media-secondary-color rgb(20 20 30 / .7) Default color of range background.
--media-control-display inline-block display property of control.
--media-control-padding 10px padding of control.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .7)) background of control.
--media-control-hover-background rgb(50 50 70 / .7) background of control hover state.
--media-control-height 24px height of control.
--media-range-padding var(--media-control-padding, 10px) padding of range.
--media-range-padding-left var(--_media-range-padding) padding-left of range.
--media-range-padding-right var(--_media-range-padding) padding-right of range.
--media-range-thumb-width 10px width of range thumb.
--media-range-thumb-height 10px height of range thumb.
--media-range-thumb-border none border of range thumb.
--media-range-thumb-border-radius 10px border-radius of range thumb.
--media-range-thumb-background var(--media-primary-color, rgb(238 238 238)) background of range thumb.
--media-range-thumb-box-shadow 1px 1px 1px transparent box-shadow of range thumb.
--media-range-thumb-transition transition of range thumb.
--media-range-thumb-transform none transform of range thumb.
--media-range-thumb-opacity 1 opacity of range thumb.
--media-range-bar-color var(--media-primary-color, rgb(238 238 238)) background of range progress.
--media-range-track-background rgb(255 255 255 / .2) background of range track background.
--media-range-track-backdrop-filter backdrop-filter of range track.
--media-range-track-width 100% width of range track.
--media-range-track-height 4px height of range track.
--media-range-track-border none border of range track.
--media-range-track-outline outline of range track.
--media-range-track-outline-offset outline-offset of range track.
--media-range-track-border-radius 1px border-radius of range track.
--media-range-track-box-shadow none box-shadow of range track.
--media-range-track-transition transition of range track.
--media-range-track-translate-x 0px translate x-coordinate of range track.
--media-range-track-translate-y 0px translate y-coordinate of range track.
--media-time-range-hover-display block display of range hover zone.
--media-time-range-hover-bottom -5px bottom of range hover zone.
--media-time-range-hover-height max(100% + 5px, 20px) height of range hover zone.
--media-range-track-pointer-background background of range track pointer.
--media-range-track-pointer-border-right border-right of range track pointer.