JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player">
        <div id="volume"></div>
    </div>

CSS

body {
    height: 600px;
    background: rgb(17, 17, 17);
    background: -webkit-gradient(radial, center center, 0, center center, 40%, from(rgba(100, 100, 100,0.5)), to(rgba(17, 17, 17,0))) no-repeat url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
    background: -webkit-radial-gradient(rgba(100, 100, 100,0.5),rgba(17, 17, 17,0) 40%) no-repeat, url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
    background: -moz-radial-gradient(rgba(100, 100, 100,0.5),rgba(17, 17, 17,0) 40%) no-repeat, url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
    background: -ms-radial-gradient(rgba(100, 100, 100,0.5),rgba(17, 17, 17,0) 40%) no-repeat, url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
    background: -o-radial-gradient(rgba(100, 100, 100,0.5),rgba(17, 17, 17,0) 40%) no-repeat, url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
    background: radial-gradient(rgba(100, 100, 100,0.5),rgba(17, 17, 17,0) 40%) no-repeat, url(http://planetoftheweb.com/exercises/jsuislider/images/backgroundpattern.png),rgb(17, 17, 17);
}

#player {
    width: 350px;
    height: 50px;    
    position: relative;
    margin: 0 auto;
    top: 300px;
    background: url('http://planetoftheweb.com/exercises/jsuislider/images/volume-background.png') no-repeat left top;
}

#volume {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:15px;
    width: 300px;
    background: url('http://planetoftheweb.com/exercises/jsuislider/images/volume-empty.png') no-repeat left top;
}

#volume .ui-slider-range-min {
    height:15px;
    width: 300px;
    position: absolute;
    background: url('http://planetoftheweb.com/exercises/jsuislider/images/volume-full.png') no-repeat left top;
}

#volume .ui-slider-handle {
    width: 38px;
    height:39px;
   ...

JavaScript

var myMedia = document.createElement('audio');
$(document).ready(function() {
    $("#volume").slider({
        range: "min",
        min: 0,
        max: 100,
        value: 80,
        animate: true,
        slide: function(event, ui) {
            setVolume((ui.value) / 100);
        }
    });

    document.getElementById('player').appendChild(myMedia);
    myMedia.id = "myMedia";
    playMedia('ViewSource');
});

function playMedia(fileName) {


    mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' : (myMedia.canPlayType('audio/ogg')) ? '.ogg' : '';


    if (mediaExt) {
        myMedia.src = "http://planetoftheweb.com/exercises/jsuislider/audio/" + fileName + mediaExt;
        myMedia.setAttribute('loop', 'loop');
        myMedia.play();
        setVolume(.8);
    }
}

function setVolume(myVolume) {
    var myMedia = document.getElementById('myMedia');
    myMedia.volume = myVolume;
}