| 1 |
- :root{--van-slider-active-background-color: var(--van-primary-color);--van-slider-inactive-background-color: var(--van-gray-3);--van-slider-disabled-opacity: var(--van-disabled-opacity);--van-slider-bar-height: .05333rem;--van-slider-button-width: .64rem;--van-slider-button-height: .64rem;--van-slider-button-border-radius: 50%;--van-slider-button-background-color: var(--van-white);--van-slider-button-box-shadow: 0 .02667rem .05333rem rgba(0, 0, 0, .5)}.van-slider{position:relative;width:100%;height:var(--van-slider-bar-height);background:var(--van-slider-inactive-background-color);border-radius:var(--van-border-radius-max);cursor:pointer}.van-slider:before{position:absolute;top:calc(var(--van-padding-xs) * -1);right:0;bottom:calc(var(--van-padding-xs) * -1);left:0;content:""}.van-slider__bar{position:absolute;width:100%;height:100%;background:var(--van-slider-active-background-color);border-radius:inherit;transition:all var(--van-animation-duration-fast)}.van-slider__button{width:var(--van-slider-button-width);height:var(--van-slider-button-height);background:var(--van-slider-button-background-color);border-radius:var(--van-slider-button-border-radius);box-shadow:var(--van-slider-button-box-shadow)}.van-slider__button-wrapper{position:absolute;cursor:grab;top:50%}.van-slider__button-wrapper--right{right:0;transform:translate(50%,-50%)}.van-slider__button-wrapper--left{left:0;transform:translate(-50%,-50%)}.van-slider--disabled{cursor:not-allowed;opacity:var(--van-slider-disabled-opacity)}.van-slider--disabled .van-slider__button-wrapper{cursor:not-allowed}.van-slider--vertical{display:inline-block;width:var(--van-slider-bar-height);height:100%}.van-slider--vertical .van-slider__button-wrapper--right{top:auto;right:50%;bottom:0;transform:translate(50%,50%)}.van-slider--vertical .van-slider__button-wrapper--left{top:0;right:50%;left:auto;transform:translate(50%,-50%)}.van-slider--vertical:before{top:0;right:calc(var(--van-padding-xs) * -1);bottom:0;left:calc(var(--van-padding-xs) * -1)}
|
