| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 | @import '../style/var';.van-slider {  position: relative;  width: 100%;  height: @slider-bar-height;  background-color: @slider-inactive-background-color;  border-radius: @border-radius-max;  cursor: pointer;  // use pseudo element to expand click area  &::before {    position: absolute;    top: -@padding-xs;    right: 0;    bottom: -@padding-xs;    left: 0;    content: '';  }  &__bar {    position: relative;    width: 100%;    height: 100%;    background-color: @slider-active-background-color;    border-radius: inherit;    transition: all @animation-duration-fast;  }  &__button {    width: @slider-button-width;    height: @slider-button-height;    background-color: @slider-button-background-color;    border-radius: @slider-button-border-radius;    box-shadow: @slider-button-box-shadow;    &-wrapper,    &-wrapper-right {      position: absolute;      top: 50%;      right: 0;      transform: translate3d(50%, -50%, 0);      cursor: grab;    }    &-wrapper-left {      position: absolute;      top: 50%;      left: 0;      transform: translate3d(-50%, -50%, 0);      cursor: grab;    }  }  &--disabled {    cursor: not-allowed;    opacity: @slider-disabled-opacity;    .van-slider__button-wrapper,    .van-slider__button-wrapper-left,    .van-slider__button-wrapper-right {      cursor: not-allowed;    }  }  &--vertical {    display: inline-block;    width: @slider-bar-height;    height: 100%;    .van-slider__button-wrapper,    .van-slider__button-wrapper-right {      top: auto;      right: 50%;      bottom: 0;      transform: translate3d(50%, 50%, 0);    }    .van-slider__button-wrapper-left {      top: 0;      right: 50%;      left: auto;      transform: translate3d(50%, -50%, 0);    }    // use pseudo element to expand click area    &::before {      top: 0;      right: -@padding-xs;      bottom: 0;      left: -@padding-xs;    }  }}
 |