Component
Volume
Volume slider with mute toggle. Slider expands on hover.
Behavior
The volume slider is hidden by default and expands on hover using a CSS width transition — no JavaScript toggle needed. This keeps the controls bar compact while remaining fully accessible.
Icon states
| Condition | Icon |
|---|---|
| Muted or volume = 0 | VolumeX (crossed out) |
| Volume 1–49 | Volume1 (single wave) |
| Volume 50–100 | Volume2 (double wave) |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| volume* | number | — | Current volume level from 0 to 100. |
| isMuted* | boolean | — | Current mute state. |
| onVolumeChange* | (volume: number) => void | — | Called with the new volume level (0–100). |
| onToggleMute* | () => void | — | Toggle between muted and unmuted states. |
volume*
number
Current volume level from 0 to 100.
isMuted*
boolean
Current mute state.
onVolumeChange*
(volume: number) => void
Called with the new volume level (0–100).
onToggleMute*
() => void
Toggle between muted and unmuted states.