Volume Control — Free Custom Slider HTML CSS JS Snippet

A volume control is the speaker-plus-slider you find in every media player, video app, and sound settings panel. This snippet builds a polished, fully custom one — not a styled <input type=range> — in HTML, CSS, and vanilla JavaScript, with pointer dragging, a mute button that remembers the last level, full keyboard support, and a speaker icon that changes with the volume. No library, no audio dependency.

A custom track, not a native range

The track is a plain div with an absolutely-positioned fill and a round knob whose left is a percentage. Building it by hand (instead of restyling <input type=range>, which is notoriously inconsistent across browsers) gives total control over the knob size, the focus ring, and the active scale animation. touch-action:none on the track stops the browser from scrolling the page while you drag on touch devices.

Pointer Events for unified drag

A single set of Pointer Events handles mouse, touch, and pen identically. On pointerdown the track calls setPointerCapture, so dragging keeps tracking even when the cursor leaves the element, and fromPointer() converts clientX into a 0–100 value using getBoundingClientRect(). That one geometry function powers both the initial click-to-seek and continuous dragging.

Mute that remembers

The speaker button toggles muted, which renders the fill at zero without losing the real volume. A lastVolume variable stores the level so un-muting restores exactly where you were — and dragging the slider above zero auto-un-mutes, matching how native players behave. The icon swaps between muted, low, and high SVGs based on the current state, so the glyph always reflects what you'll hear.

Accessible slider semantics

The track uses role="slider" with aria-valuemin, aria-valuemax, and a live aria-valuenow, and is focusable via tabindex="0". Arrow keys nudge by 5, Home and End jump to mute and max, and the focus-visible ring plus a scaled knob make the keyboard state obvious — so it's operable and announced correctly without a mouse.

Wiring to audio

Point setVolume() at a real sink: set audioElement.volume = shown / 100 (the HTML5 media API expects 0–1) or a Web Audio GainNode.gain.value. Because every change funnels through setVolume() and paint(), syncing the UI to actual playback — including external volume changes — is a one-line addition.