vantui-edit/es/slider/index.css

一套适用于Taro3及React的vantui组件库

.van-slider{position:relative;height:4px;height:var(--slider-bar-height,4px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider::before{position:absolute;right:0;left:0;content:'';top:-16px;top:var(--padding-xs,-16px);bottom:-16px;bottom:var(--padding-xs,-16px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;-webkit-transition:all .2s;transition:all .2s;-webkit-transition:all var(--animation-duration-fast, .2s);transition:all var(--animation-duration-fast, .2s)}.van-slider__button{width:48px;width:var(--slider-button-width,48px);height:48px;height:var(--slider-button-height,48px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 2px 4px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 2px 4px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper,.van-slider__button-wrapper-right{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider__button-wrapper-left{position:absolute;top:50%;left:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity, .5)}.van-slider--vertical{display:inline-block;width:4px;width:var(--slider-bar-height,4px);height:100%}.van-slider--vertical .van-slider__button-wrapper,.van-slider--vertical .van-slider__button-wrapper-right{top:auto;right:50%;bottom:0;-webkit-transform:translate3d(50%,50%,0);transform:translate3d(50%,50%,0)}.van-slider--vertical .van-slider__button-wrapper-left{top:0;right:50%;left:auto;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider--vertical::before{top:0;right:-16px;right:var(--padding-xs,-16px);bottom:0;left:-16px;left:var(--padding-xs,-16px)}