.slider{border-radius:12px;box-sizing:content-box;display:inline-block;position:relative;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;height:4px;width:100%;padding:10px 0;.slider-rail{opacity:.38;width:100%}.slider-rail,.slider-track{display:block;position:absolute;border-radius:inherit;background-color:currentColor;height:inherit;top:50%;transform:translateY(-50%)}.slider-track{border:1px solid;transition:left .15s cubic-bezier(.4,0,.2,1) 0s,width .15s cubic-bezier(.4,0,.2,1) 0s,bottom .15s cubic-bezier(.4,0,.2,1) 0s,height .15s cubic-bezier(.4,0,.2,1) 0s}.slider-mark{position:absolute;width:2px;height:2px;border-radius:1px;background-color:currentColor;top:50%;transform:translate(-1px,-50%);&.active{background-color:#fff;opacity:.8}}.slider-thumb{position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:50%;outline:0;background-color:currentColor;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s cubic-bezier(.4,0,.2,1) 0s,left .15s cubic-bezier(.4,0,.2,1) 0s,bottom .15s cubic-bezier(.4,0,.2,1) 0s;top:50%;transform:translate(-50%,-50%);&:before{content:"";border-radius:inherit;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}&:before,input{position:absolute;width:100%;height:100%}input{border:0;clip:rect(0,0,0,0);margin:-1px;overflow:hidden;padding:0;white-space:nowrap;direction:ltr}}}