Volume Slider Keeps Muting Automatically

I am creating a responsive audio player from scratch using HTML 5, jQuery and Amplitude.js for Live streaming.

On the right side of the player is a "Speaker Icon" that when clicked, mutes the volume, but when simply hovered displays a vertical volume slider.

When the volume slider handle is in the MouseDown state, the audio levels decrease or increase accordingly. However after selection when the handle enters a MouseUp state, the slider handle jumps to the bottom, effectively muting the volume.

I have tried to use JavaScript to deactivate the Mute/Unmute toggle class created for the Speaker Icon button as the Volume Slider is a Range Slider within a Child-div of the Mute/Unmute div, however I am still not able to stop the slider from muting upon MouseUp.

Please help.

The code written in an attempt to disable the ToggleClass is as follows:

$(function volmute() {
$("#amplitude-mute").click(function () {
    $(this).toggleClass("unmute mute").siblings().removeClass("unmute mute");
 });
});

full jsFiddle of player