JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<link rel="stylesheet" href="http://ionicons.com/css/ionicons.min.css">
<audio id="audio" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3" controls></audio>


<div class="volumebar">
   <div class="volume"></div>
</div>

<div class="iconsound medium">
    <i class="ion-volume-mute"></i>
    <i class="ion-volume-low"></i>
    <i class="ion-volume-medium"></i>
    <i class="ion-volume-high"></i>
</div>

CSS

.volumebar{cursor:pointer;position:relative;background:#ddd;width:200px;height:20px;}
.volume{position:absolute;left:0;top:0;height:100%;background:#bbb;}

.iconsound{width:40px;height:40px;color:#000;text-align:center;line-height:40px;}
.iconsound i{width:100%;height:100%;display:block;font-size:1.6em;display:none;}
.iconsound.high .ion-volume-high{display:block;}
.iconsound.medium .ion-volume-medium{display:block;}
.iconsound.low .ion-volume-low{display:block;}
.iconsound.mute .ion-volume-mute{display:block;}

JavaScript

var audioj = $('#audio');
var volumeBar = $('.volumebar');
var volumes = $('.volume');
var volumeDrag = false;
audioj[0].volume = 0.7;
volumes.css('width', '70%');
var iconsound = $('.iconsound');

volumeBar.on('mousedown', function(e) {
   var position = e.pageX - volumeBar.offset().left;
   var percentage = 100 * position / volumeBar.width();
   volumes.css('width', percentage+'%');
   audioj[0].volume = percentage / 100;
});

	volumes.on('mousedown', function(e) {
		volumeDrag = true;
        audioj[0].muted = false;
		$('.sound').removeClass('muted');
		updateVolume(e.pageX);
	});
	$(document).on('mouseup', function(e) {
		if(volumeDrag) {
			volumeDrag = false;
			updateVolume(e.pageX);
		}
	});
	$(document).on('mousemove', function(e) {
		if(volumeDrag) {
			updateVolume(e.pageX);
		}
	});
	var updateVolume = function(x, vol) {
		var percentage;
		if(vol) {
			percentage = vol * 100;
		} else {
			var position = x - volumeBar.offset().left;
			percentage = 100 * position / volumeBar.width();}
		
		if(percentage > 100) {percentage = 100;}
		if(percentage < 0) {percentage = 0;}
	
		volumes.css('width',percentage+'%');	
		audioj[0].volume = percentage / 100;
		
		if(audioj[0].volume == 0){
		

	$('.iconsound').removeClass('medium').removeClass('low').removeClass('high').addClass('mute');
		}
		else if(audioj[0].volume < 0.3){
			$('.iconsound').removeClass('mute').removeClass('medium').removeClass('high').addClass('low');
		}
		else if(audioj[0].volume < 0.7){
			$('.iconsound').removeClass('low').removeClass('mute').removeClass('high').addClass('medium');
		}
		else if(audioj[0].volume <= 1){
			$('.iconsound').removeClass('medium').removeClass('mute').removeClass('low').addClass('high');
		}
		else{
			$('.iconsound').removeClass('mute').removeClass('low').removeClass('high');
		}
		
	};
       iconsound.on('click', function(){
          if (iconsound.hasClass('mute') == true) {
                audioj.prop("muted",!audioj.prop("muted"));
               ...