JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css">
<input id="volume" type="range" min="0" max=".5" step="0.01" value="0.4"/>
<input id="gain" type="number" min="0" max="1" step="0.01" value="0.4"/>
<div id="sliderOne"></div>

CSS

#sliderOne{

    left:300px;

}

JavaScript

// Synthesizer & WEB AUDIO API block
window.context = new webkitAudioContext(); // This is the first line of code you always need with the Web Audio API

window.oscillator = context.createOscillator(),   // create oscillator
oscillator.type = 1;                  // 4 types of oscillators are available. They are Sine wave = 0, Square wave = 1, Sawtooth wave = 2, Triangle wave = 3, a fourth option exists as well called "custom".
window.gainNode = context.createGainNode(); // Declare gain node
window.oscillator.connect(gainNode); // Connect sine wave to gain node
window.gainNode.connect(context.destination); // Connect gain node to "speakers"




window.gainNode.gain.value = 0.4;  // This is the volume.

// END OF Synthesizer & WEB AUDIO API block



//BEGIN JQuery Slider
$(function() {
    var webSlider = document.getElementById('volume');
    webSlider.addEventListener('change', function () {
        window.gainNode.gain.value = this.value;
        output.val(window.gainNode.gain.value);
    });
    var output = $('#gain');
     var sliderParams = {
        'orientation': "vertical",
        'range': "min",
        'min': 0,
        'max': 1,
        'animate': false,
        'step': 0.01,
        'slide': function(event, ui) {  
            window.gainNode.gain.value = ui.value;
            output.val(window.gainNode.gain.value);
         },
        'stop': function(event, ui) {
            console.log(window.gainNode.gain.value);
        }
      };

    $('#sliderOne').slider(sliderParams);


});

//END OF JQuery Slider //