html,body{margin:0;height:100%}#c{width:100%;height:100%;display:block}.slider{--SliderColor: rgb(100%, 100%, 100%);--SliderGradientBegin: rgb(100%, 100%, 100%);width:150px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;background:linear-gradient(to right,var(--SliderGradientBegin));outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.values{display:inline-block;width:25px;min-width:25px}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5px;height:20px;background:var(--SliderColor);cursor:pointer}.slider::-moz-range-thumb{width:5px;height:20px;background:var(--SliderColor);cursor:pointer}