<div class="SliderContainer" id=SliderContainer>
    <input id="slider" type="range" step = 0.1 min="0" max="20" class="slider"> 
  </div>
   
  
   
   <input id="value" />
<div id=text2> Hz</div>
     
  
<button class=playButton id=playButton>Play<br>Tone</button> 
       
  

body {
  margin: 0;
  padding: 0;
  font-family: avenir next;
  color: #F94144;
  background-color: #000000;
}

.SliderContainer{
  z-index: 5;
  width: 60%;
  display: block;
  position: absolute;
  top: 42%;
  left: 4%;
  height: 16%;
  background-color: #F94144;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 99.2%;
  height: 12vh;
  outline: none; 
  padding-left: 0%;
  padding-right: 0%;
  margin-left: 0.4%;
  margin-right: 0.4%;
  margin-top: 2vh;
  vertical-align: top;
  background: #000000;
}
 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24vh;
  height: 16vh;
  background: #F94144;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 4vh;
  height: 1vh;
  background: #F94144;
  cursor: pointer;
}

#value{
  border: none;
  color: #F94144;
  background-color: #000000;
  text-align: right;
  position: absolute;
  width: 10%;
  font-size: 2.5vw;
  top: 40%;
  right: 25%;
}

#text2{
  position: absolute;
  color: #F94144;
  font-size: 2.5vw;
  top: 40%;
  right: 19%;
  width: 5%; 
}

button {
  background-color: #F94144;
  color: #000000;
  font-size: 2.5vw;
  font-family: avenir next;
  user-select: none;
  border-color: #F94144;
  border-radius: 4px;
  border-style: solid;
  position: absolute;
  top: 25%;
  right: 4%;
  height: 50%;
  width: 14%
  
}

//*** initialize tone.js synth ***

const synth = new Tone.PolySynth(Tone.Synth, {
  oscillator: {
		type:"sine"},
  envelope: { attack : 0.1,
              decay : 6.0,
              sustain : 0.0,
              release : 6.0},
  volume: -6,
    });


const reverb = new Tone.Reverb({wet:0.5}).toDestination();
synth.connect(reverb);




//*** set synth parameters with buttons and sliders ***
/*
      //oscillator type
document.getElementById("sine").addEventListener('click', function() {synth.set({
	"oscillator": {
		type:"sine"}});
       document.getElementById("sine").className = "ActiveButton";
       document.getElementById("triangle").className = "OtherButton";
       document.getElementById("square").className = "OtherButton";
     })

document.getElementById("triangle").addEventListener('click', function() {synth.set({
	"oscillator": {
		type:"triangle"}});
       document.getElementById("sine").className = "OtherButton";
       document.getElementById("triangle").className = "ActiveButton";
       document.getElementById("square").className = "OtherButton";
    })

document.getElementById("square").addEventListener('click', function() {synth.set({
	"oscillator": {
		type:"square"}});
       document.getElementById("sine").className = "OtherButton";
       document.getElementById("triangle").className = "OtherButton";
       document.getElementById("square").className = "ActiveButton";
     })
*/
  
var root = 440;
function trigger() {
  playButton.style.opacity = 0.5
  root = document.getElementById("value").value;
synth.triggerAttackRelease(root, "4n");
  this.backgroundColor = "#000000";
  
  function resetOpacity(){
      playButton.style.opacity = 1}   
      
    setTimeout(function(){resetOpacity()}, 250)
}


document.getElementById("playButton").addEventListener('click', trigger)

  
/** Log slider **/

// Generic class:

function LogSlider(options) {
   options = options || {};
   this.minpos = options.minpos || 0;
   this.maxpos = options.maxpos || 100;
   this.minlval = Math.log(options.minval || 1);
   this.maxlval = Math.log(options.maxval || 100000);

   this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}

LogSlider.prototype = {
   // Calculate value from a slider position
   value: function(position) {
      return Math.exp((position - this.minpos) * this.scale + this.minlval);
   },
   // Calculate slider position from a value
   position: function(value) {
      return this.minpos + (Math.log(value) - this.minlval) / this.scale;
   }
};


// Usage: 

var logsl = new LogSlider({maxpos: 20, minval: 20, maxval: 20000});

$('#slider').on('change', function() {
   var val = logsl.value(+$(this).val());
   $('#value').val(val.toFixed(0));
});

$('#value').on('keyup', function() {
   var pos = logsl.position(+$(this).val());
   $('#slider').val(pos);
});

$('#value').val("220").trigger("keyup");