media-volume-slider
A slider component for controlling media playback volume
Anatomy
<VolumeSlider.Root /><media-volume-slider></media-volume-slider>Behavior
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.
Styling
Use CSS custom properties to style the fill and pointer levels:
media-volume-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}React renders a <div> element. Add a className to style it:
.volume-slider::before {
width: calc(var(--media-slider-fill) * 1%);
}Accessibility
Renders with role="slider" and an automatic aria-label that resolves to “Volume” from the active locale. Override with the label prop. Keyboard controls:
- Arrow Left / Arrow Right: step by
stepincrement - Page Up / Page Down: step by
largeStepincrement - Home: set volume to 0
- End: set volume to max
Scroll wheel support:
- Mouse wheel / trackpad scroll: adjusts volume by
wheelStepincrement (default5)
Examples
Nest sub-components for full control over the slider’s DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.
import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function WithParts() {
return (
<Player.Provider>
<Player.Container className="media-container">
<Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
<MuteButton
className="media-mute-button"
render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
/>
<VolumeSlider.Root className="media-volume-slider">
<VolumeSlider.Track className="media-slider-track">
<VolumeSlider.Fill className="media-slider-fill" />
</VolumeSlider.Track>
<VolumeSlider.Thumb className="media-slider-thumb" />
<VolumeSlider.Value type="pointer" className="media-slider-value" />
</VolumeSlider.Root>
</Player.Container>
</Player.Provider>
);
}
.media-container {
position: relative;
}
.media-container video {
width: 100%;
}
.media-mute-button {
position: absolute;
bottom: 10px;
left: 10px;
padding-block: 8px;
padding-inline: 20px;
color: black;
cursor: pointer;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
backdrop-filter: blur(10px);
}
.media-volume-slider {
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
width: 100px;
height: 20px;
cursor: pointer;
}
.media-slider-track {
position: absolute;
right: 0;
left: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 9999px;
backdrop-filter: blur(10px);
transition: height 150ms ease;
}
.media-volume-slider[data-interactive] .media-slider-track {
height: 6px;
}
.media-slider-fill {
position: absolute;
top: 0;
left: 0;
width: var(--media-slider-fill);
height: 100%;
background: white;
border-radius: 9999px;
}
.media-slider-thumb {
position: absolute;
left: var(--media-slider-fill);
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transform: translateX(-50%) scale(0);
transition: transform 150ms ease;
}
.media-volume-slider[data-interactive] .media-slider-thumb {
transform: translateX(-50%) scale(1);
}
.media-volume-slider[data-dragging] .media-slider-thumb {
transform: translateX(-50%) scale(1.1);
}
.media-slider-value {
position: absolute;
bottom: 100%;
left: var(--media-slider-pointer);
padding: 2px 6px;
margin-bottom: 6px;
font-size: 12px;
color: white;
white-space: nowrap;
pointer-events: none;
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 150ms ease;
}
.media-volume-slider[data-pointing] .media-slider-value {
opacity: 1;
}
<video-player class="video-player">
<media-container>
<video
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="media-mute-button">
<span class="muted">Unmute</span>
<span class="unmuted">Mute</span>
</media-mute-button>
<media-volume-slider class="media-volume-slider">
<media-slider-track class="media-slider-track">
<media-slider-fill class="media-slider-fill"></media-slider-fill>
</media-slider-track>
<media-slider-thumb class="media-slider-thumb"></media-slider-thumb>
<media-slider-value type="pointer" class="media-slider-value"></media-slider-value>
</media-volume-slider>
</media-container>
</video-player>
.video-player,
.video-player media-container {
position: relative;
display: block;
}
.video-player video {
width: 100%;
}
.media-mute-button {
position: absolute;
bottom: 10px;
left: 10px;
padding-block: 8px;
padding-inline: 20px;
color: black;
cursor: pointer;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
backdrop-filter: blur(10px);
}
.media-mute-button .muted {
display: none;
}
.media-mute-button .unmuted {
display: none;
}
.media-mute-button[data-muted] .muted {
display: inline;
}
.media-mute-button:not([data-muted]) .unmuted {
display: inline;
}
.media-volume-slider {
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
width: 100px;
height: 20px;
cursor: pointer;
}
.media-slider-track {
position: absolute;
right: 0;
left: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 9999px;
backdrop-filter: blur(10px);
transition: height 150ms ease;
}
.media-volume-slider[data-interactive] .media-slider-track {
height: 6px;
}
.media-slider-fill {
position: absolute;
top: 0;
left: 0;
width: var(--media-slider-fill);
height: 100%;
background: white;
border-radius: 9999px;
}
.media-slider-thumb {
position: absolute;
left: var(--media-slider-fill);
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transform: translateX(-50%) scale(0);
transition: transform 150ms ease;
}
.media-volume-slider[data-interactive] .media-slider-thumb {
transform: translateX(-50%) scale(1);
}
.media-volume-slider[data-dragging] .media-slider-thumb {
transform: translateX(-50%) scale(1.1);
}
.media-slider-value {
position: absolute;
bottom: 100%;
left: var(--media-slider-pointer);
padding: 2px 6px;
margin-bottom: 6px;
font-size: 12px;
color: white;
white-space: nowrap;
pointer-events: none;
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 150ms ease;
}
.media-volume-slider[data-pointing] .media-slider-value {
opacity: 1;
}
import '@videojs/html/video/player';
import '@videojs/html/ui/mute-button';
import '@videojs/html/ui/volume-slider';
API Reference
Rootmedia-volume-slider
Props
| Prop | Type | Default | Details |
|---|---|---|---|
disabled | boolean | — | |
| |||
label | Text | string | Text) | function | '' | |
| |||
largeStep | number | — | |
| |||
max | number | — | |
| |||
min | number | — | |
| |||
orientation | 'horizontal' | 'vertical' | — | |
| |||
step | number | — | |
| |||
thumbAlignment | 'center' | 'edge' | — | |
| |||
value | number | — | |
| |||
wheelStep | number | 5 | |
| |||
State
State is accessible via the
render, className, and style props.State is reflected as data attributes for CSS styling.
| Property | Type | Details |
|---|---|---|
availability | 'available' | 'unavailable' | 'unsupp... | |
| ||
value | number | |
| ||
fillPercent | number | |
| ||
pointerPercent | number | |
| ||
dragging | boolean | |
| ||
pointing | boolean | |
| ||
interactive | boolean | |
| ||
orientation | 'horizontal' | 'vertical' | |
| ||
disabled | boolean | |
| ||
thumbAlignment | 'center' | 'edge' | |
| ||
muted | boolean | |
| ||
volume | number | |
| ||
Data attributes
| Attribute | Type | Details |
|---|---|---|
data-availability | 'available' | 'unavailable' | 'unsupp... | |
| ||
CSS custom properties
| Variable | Details |
|---|---|
--media-slider-fill | |
| |
--media-slider-pointer | |
| |
Fillmedia-slider-fill
Displays the filled portion from start to the current value.
Previewmedia-slider-preview
Positioning container for preview content that tracks the pointer along the slider.
Props
| Prop | Type | Default | Details |
|---|---|---|---|
overflow | SliderPreviewOverflow | — | |
| |||
Data attributes
| Attribute | Type | Details |
|---|---|---|
data-dragging | ||
| ||
data-pointing | ||
| ||
data-interactive | ||
| ||
data-orientation | 'horizontal' | 'vertical' | |
| ||
data-disabled | ||
| ||
Thumbmedia-slider-thumb
Draggable handle for setting the slider value. Receives focus and handles keyboard interaction.
Data attributes
| Attribute | Type | Details |
|---|---|---|
data-dragging | ||
| ||
data-pointing | ||
| ||
data-interactive | ||
| ||
data-orientation | 'horizontal' | 'vertical' | |
| ||
data-disabled | ||
| ||
Trackmedia-slider-track
Contains the slider's visual track and interactive hit zone.
Valuemedia-slider-value
Displays a formatted text representation of the slider value. Renders an <output> element.
Props
| Prop | Type | Default | Details |
|---|---|---|---|
format | ((value: number) => string) | — | |
| |||
type | "current" | "pointer" | — | |
| |||
Data attributes
| Attribute | Type | Details |
|---|---|---|
data-dragging | ||
| ||
data-pointing | ||
| ||
data-interactive | ||
| ||
data-orientation | 'horizontal' | 'vertical' | |
| ||
data-disabled | ||
| ||