JSFiddle - React, Tailwind, and code Playground

HTML

<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_pitch
{
	width: 28%;
}
#osc1_detune
{
	width: 28%;
}
#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

////WEB AUDIO SETUP - PROBLEM CODE 1////
// var pitch = document.getElementById('cur_pitch').value;
// var detune = document.getElementById('cur_detune').value;
// var ctx = new webkitAudioContext(); 
// function osc1(){ 
// osc = ctx.createOscillator(), 
// osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
// osc.frequency.value = pitch;
// osc.detune.value = detune;
// gainNode = ctx.createGainNode(); 
// osc.connect(gainNode); 
// gainNode.connect(ctx.destination);
// gainNode.gain.value = 1; 
// osc.noteOn(0); 
// };

////SLIDER SET UP////
$(document).ready(function(){
	$(function() {
    	$("#osc1_pitch").slider({
    		min: 0,
    		max: 25000,
    		value: 440,
    		step: 1,
    		slide: function(event, ui) {
            	$("#cur_pitch").val(ui.value);
        	}
            ////CHANGE EVENT TO SET FREQUENCY NODE VALUE - PROBLEM CODE 2////
            //change: function(event, ui){
        	//	osc.frequency.value = $("#cur_pitch").val();
        	//}
    	});
    	$("#cur_pitch").val($("#osc1_pitch").slider("value"));
    });
	$(function() {
    	$("#osc1_detune").slider({
    		min: -4800,
    		max: 4800,
    		value: 0,
    		step: 1,
    		slide: function(event, ui) {
            	$("#cur_detune").val(ui.value);
        	}
            ////CHANGE EVENT TO SET DETUNE NODE VALUE - PROBLEM CODE 2.1////
            //change: function(event, ui){
        	//	osc.detune.value = $("#cur_detune").val();
        	//}
    	});
    	$("#cur_detune").val($("#osc1_detune").slider("value"));
    });
    
});