Implementing a Volume Range with an onChange Event

InstructorLindsey Kopacz

Share this video with your friends

Send Tweet

We create an input range with a label, where the range is between 0 and 1 with a step of 0 - 1. The input's value should be determined by a ternary statement that checks if the volume is muted and sets it to 0 or to the current volume if not muted.

An onVolumeScrubberChange function is also added that sets the volume to the event target value when the input value changes and updates the volume in the state and an audio reference. The onVolumeChange function does not need to be used and the logic needs to be adjusted to ensure that the volume can be updated and that it mutes when the volume reaches 0.

Think about: Why do we have to add audioRef.current.volume === 0 in addition to audioRef.current.muted?