I've been doing freecodecamps Drum Machine app. I was able to complete the app completely with React but I made a copy to try and get familiar with using react-redux together and I'm not doing something correct when trying to refactor the input slider. It will not change the volume of the clips and it does not update the display with the volume change.
This is my working react app React Only Drum Machine
This is the one I'm trying to refactor React-Redux Drum Machine
This is a guy that I patterned a lot of mine from trying to understand how to put into practice what I learned from freecodecamp J8ahmed Drum Machine
I think it might be something about this code here but I'm not sure
<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.volumeToggle(e)}}/>
Turned out it was a simple error in the App class I assigned this volumeToggle function to updateVolume but in the control class I tried to call this.props.powerToggle(). Below is the correct code. A big thank you to J8ahmed who took a look at it when I messaged him specifically and helped me see the error.
App Class
<Controls power={this.props.power} volume={this.props.volume} bank={this.props.bank} info={this.props.info} powerToggle={this.powerToggle} bankToggle={this.bankToggle} updateVolume={this.volumeToggle}/>
Controls Class
<div id="volume-container">
<h1>Volume</h1>
<div class="slidecontainer">
<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.updateVolume(e)}}/>
</div>
</div>