JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="play_pause" value="play"/><br/>
	<label for="cur_vol">Current Volume:</label><input type="text" id="cur_vol" />
	<div id="osc1_vol"></div>
	<label for="cur_pitch">Current Pitch:</label><input type="text" id="cur_pitch" />
	<div id="osc1_pitch"></div>
	<label for="cur_detune">Current Detune:</label><input type="text" id="cur_detune" />
	<div id="osc1_detune"></div>

CSS

#osc1_vol
{
	width: 28%;
}
#osc1_pitch
{
	width: 28%;
}
#osc1_detune
{
	width: 28%;
}
#cur_vol
{
	border: none;
	outline: none;
	display: inline;
}
#cur_pitch
{
	border: none;
	outline: none;
	display: inline;
}
#cur_detune
{
	border: none;
	outline: none;
	display: inline;
}
.ui-slider .ui-slider-handle 
{ 
	width: 5px;
	margin-left: auto;
	margin-right: auto;
	outline: none;
}

JavaScript

$(document).ready(function(){
//GAIN SLIDER//
	$(function() {
    	$("#osc1_vol").slider({
    		min: 0,
    		max: 1,
    		value: .5,
    		step: .01,
    		slide: function(event, ui) {
            	$("#cur_vol").val(ui.value);
            	gainNode.gain.value = $("#cur_vol").val();
        	}
    	});
    	$("#cur_vol").val($("#osc1_vol").slider("value"));
          $("#play_pause").click();
        $("#play_pause")[0].attributes["value"]="pause";
        
      
    });
//PITCH SLIDER//
	$(function() {
    	$("#osc1_pitch").slider({
    		min: 0,
    		max: 25000,
    		value: 440,
    		step: 1,
    		slide: function(event, ui) {
            	$("#cur_pitch").val(ui.value);
            	osc.detune.value = $("#cur_pitch").val();
        	}
    	});
    	$("#cur_pitch").val($("#osc1_pitch").slider("value"));
    });
//DETUNE SLIDER//
	$(function() {
    	$("#osc1_detune").slider({
    		min: -4800,
    		max: 4800,
    		value: 0,
    		step: 1,
    		slide: function(event, ui) {
            	$("#cur_detune").val(ui.value);
            	osc.detune.value = $("#cur_detune").val();
        	}
    	});
    	$("#cur_detune").val($("#osc1_detune").slider("value"));
    });
//PLAY/PAUSE BUTTON//
    $('#play_pause').click(function() {
   		if ($(this).val() == "play") {
      		$(this).val("pause");
      		osc1();
   		}
   		else {
      		$(this).val("play");
     		osc.disconnect();
   		}
	});
});
//WEB AUDIO SET UP//
var ctx = new webkitAudioContext();
//CREATE OSCILLATOR//
function osc1(){ 
	osc = ctx.createOscillator(), 
	osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
	osc.frequency.value = $("#osc1_pitch").slider("value");
	osc.detune.value = $("#osc1_detune").slider("value");
	gainNode = ctx.createGainNode(); 
	osc.connect(gainNode); 
	gainNode.connect(ctx.destination);
	gainNode.gain.value - $("#osc1_vol").slider("value"); 
	osc.noteOn(0); 
};