.slider{width:100%;min-width:100px;position:relative;display:block;overflow:visible}.slider .active,.slider:hover{opacity:1}.slider-wrap{background:#ccc;height:8px;margin:20px -4px;cursor:pointer;border-radius:4px}.pointer{z-index:2;position:absolute}.picker,.picker-touch{border-radius:16px;border:2px solid #5b5d5c;position:absolute;box-sizing:content-box}.picker{width:12px;height:12px;transform:translate(-9px,-4px)}.picker-touch{pointer-events:none;width:26px;height:26px;transform:translate(-15px,-55px);opacity:0}.moving .user-using-touch .moving .picker-touch.active{opacity:1}.moving{z-index:100}.slider-period{position:absolute;background:#555;height:8px;border-radius:4px}.slider-legend{position:relative;width:100%;top:-8px;font-size:.8em;height:1px;text-align:center;color:#555}.slider-legend span:before{content:"";position:absolute;top:-.3em;left:50%;height:.3em;border-left:solid 1px #555}.slider-legend span:first-child{position:absolute;left:0;transform:translate(-50%)}.slider-legend span:last-child{position:absolute;right:0;transform:translate(50%)}.hue .slider-wrap{background:linear-gradient(to right,#d82626,#d8d826 17%,#26d826 33%,#26d8d8,#2626d8 67%,#d826d8 83%,#d82626)}.fade-enter-active,.fade-leave-active{transition:all 2s step-end}.fade-enter,.fade-leave-to{height:0;opacity:0}