Básicamente, si cambio el nivel del control deslizante, solo afecta el clic y no también el keydown, aunque llaman a la misma función playSound. No estoy seguro de lo que he estropeado

 function App() { const [soundText, setSoundText] = useState(); const [volumeLevel, setVolumeLevel] = useState(0.5) };

Lo tengo dividido por componente, tuve que cortar la mayor parte del componente de la aplicación para publicar, pero entiendes el punto

 function DrumPad({ pad, setSoundText, volumeLevel }) { useEffect(() => { document.addEventListener('keydown', handleKeyPress); return () => { document.removeEventListener('keydown', handleKeyPress) }; }, []); const playSound = () => { const audioTag = document.getElementById(pad.letter); audioTag.volume = volumeLevel; audioTag.play(); setSoundText(pad.id) } const handleKeyPress = (e) => { if(e.keyCode === pad.keyCode){ playSound(); } } return ( <div className="drum-pad" id={pad.id} onClick={playSound}> <p>{pad.letter}</p> <audio src={pad.src} className="clip" id={pad.letter}> </audio> </div> ) }

 function VolumeBar({ setSoundText, volumeLevel, setVolumeLevel }) { const volumeChanger = (e) => { setVolumeLevel(e.target.value) } return ( <div className="slide-container"> Volume <input id="myRange" type="range" min='0' max='1' step= '0.01' value={ volumeLevel } onChange={ volumeChanger } className="slider" /> </div> ) }

Gracias