Controls / The visual dictionary

Volume control.

Adjusts audio loudness within an available range.

Also calledvolume sliderloudness control
01

See it in context

UI illustration

A slider, stepper, or rotary control can represent volume. A speaker symbol and a text value clarify the setting, while mute remains a separate state when provided.

When to use it

Keep the value visible or available to assistive technology and provide predictable increments.

Know the difference

Volume is a level; muting is an independent on/off state for the audio output.

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web

Use a native button for an action and an anchor for navigation. Preserve keyboard activation and a visible focus indicator.

iOS · iPadOS · Android

Provide a comfortable touch target, use familiar system symbols when appropriate, and show a clear pressed or selected state.

macOS · Windows · Linux

Keep pointer, keyboard, and focus behavior consistent. Common commands can additionally expose a menu item or keyboard shortcut.

watchOS · Wear OS

On a watch, use a short label and a generous target within the small display. Crown or rotary input can supplement touch for adjustable values.

tvOS · Android TV

On TV, give the focused control a prominent visual state and support remote activation; hover and precise pointer targeting are not assumed.

visionOS

In spatial interfaces, use a comfortably targetable control with a clear focus response for indirect gaze-and-pinch interaction.

Primary documentation for the pattern and its platform conventions.