html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

button{
  background: #000;
  color: white;
  border-radius: 8px;
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #000000;
      border-radius: 2px;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 20px;
      -webkit-appearance: none;
      color: #000000;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 5px;
      -webkit-appearance: none;
      height: 20px;
      cursor: ew-resize;å
      background: #434343;
      box-shadow: -80px 0 0 80px #039BE4;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #039BE4; 
}
input[type="range"]::-moz-range-progress {
  background-color: #039BE4;
  height: 20px; 
}
input[type="range"]::-moz-range-track {  
  background-color: #000;
  height: 20px; 
}
input[type=range]::-moz-range-thumb {
  opacity: 0;
}

/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: none; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: none;
}