canvas{position:fixed;top:0;left:0}body{margin:0}.slidecontainer{width:100%}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:25px;background:#d3d3d3;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background:#04aa6d;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;background:#04aa6d;cursor:pointer}.derivative{color:#fff;background-color:#00000080;padding:10px}