style.css

.slider{position:relative;cursor:pointer}.slider .graphics{position:relative;height:100px;width:100px}.slider .graphics .hitarea{opacity:.1;stroke:none;fill:#1c1f24}.slider .graphics .track{stroke:hsla(0,0%,100%,.05);fill:none}.slider .graphics .bar{stroke-linecap:butt;stroke:#fff;fill:none}.slider .label{justify-content:center;text-transform:uppercase;flex-direction:column;letter-spacing:.5px;align-items:center;line-height:1.5;position:absolute;opacity:.9;display:flex;color:#fff}.slider .label .title{font-weight:200;font-size:9px}.slider .label .value{font-weight:200;font-size:13px}@media (max-height:500px),screen and (max-width:600px){.slider .label{letter-spacing:0}}.sliders{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);flex-direction:column;position:absolute;z-index:10002;display:flex;right:32px;top:50%}.sliders .slider{margin:12px 0}.toggle{display:none}.toggle.active{opacity:1}@media screen and (max-width:600px){.toggle{-webkit-transition:opacity .15s ease-out;-moz-transition:opacity .15s ease-out;-ms-transition:opacity .15s ease-out;transition:opacity .15s ease-out;background:transparent;position:absolute;z-index:10001;display:block;outline:none;border:none;opacity:.6;padding:0;margin:0;height:32px;width:32px;right:12px;fill:#fff;top:12px}.sliders{-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;-ms-transition:all .15s ease-out;transition:all .15s ease-out;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);flex-direction:row;padding:0 8px 8px;bottom:0;right:auto;left:auto;top:auto}.sliders .slider{flex:1 1 auto;width:24%}.sliders .slider .graphics{height:auto;width:100%}.sliders.open{-webkit-transform:translate(0);-moz-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.sliders .slider{margin:0 6px}}