Web audio JQuery pitch slider constructor

HTML

<div id="app"> </div>

CSS

.button{
	width:100px;
	height:100px;
	background-color:orange;
    
}

.pitchSlider{
    left:150px;
}

JavaScript

context = new webkitAudioContext();

function Osc(name,buttonName){ 
     
    /******* Dom Element creation & appending stuff********/
      this.buttonName = buttonName;

    if(typeof(this.button)==='undefined') {
        this.button  =   document.createElement('div');
    };
    
        
  
    this.button.className = buttonName;
    this.button.id = name +"_" +buttonName;
    var app = document.getElementById("app");
    $( "#app" ).append(this.button );
    
    
    if(typeof(this.pitchSlider)==='undefined') {
        this.pitchSlider = document.createElement('div');
    };
    
    
    this.pitchSlider.className = "pitchSlider";
    this.pitchSlider.id = name +"_" +"pitchSlider";
    console.log(this.pitchSlider.id);
    var pitchSlider = document.getElementById(this.pitchSlider.id); 
    $("#"+this.button.id).append(this.pitchSlider); 
    

    /**** Oscillator creation and trigger stuff *****/
    var freqValueStorage = 100;
    
    this.button.onmousedown = function(){
    this.name = context.createOscillator(),  
    this.name.type = 2;      
    this.name.frequency.value = freqValueStorage;
    this.name.connect(context.destination);
    this.name.start(0);  
    
    
    };

    this.button.onmouseup = function ()    {  
    this.name.stop(0); 


    };
    
    
    /**** JQuery UI slider for pitch/frequency ****/
     if(typeof(this.sliderParams )==='undefined') {
        this.sliderParams = {
		'orientation': "vertical",
		'range': "min",
		'min': .5,
		'max': 100,
		'animate': true,
		'step': 0.01,
		'slide': function(event, ui) {  
		   freqValueStorage = ui.value;   
		   
		},
		
		stop: function( event, ui ) {}

	};
	
	$('#'+ this.pitchSlider.id ).slider(this.sliderParams);
      
     
    };

};

osc = new Osc('osc','button');