sldr.styl

.sldr
  font-family: monospace
  
  &.is-active

    .label-min, .label-max
      opacity: 1
      transform: translate3d(0, 0px, 0)

    .label-min
      transition-delay: 0ms
    
    .label-max
      transition-delay: 150ms

  .label-wrap
    margin-top: 6px
    font-size: 12px
    color: #9B9B9B
    height: 20px
    
  .label-min, .label-max
    transform: translate3d(0, 10px, 0)
    opacity: 0
    transition: .3s cubic-bezier(0.860, 0.000, 0.070, 1.000)
    transition-property: opacity, transform;

  .label-min
    float: left
    transition-delay: 150ms

  .label-max
    transition-delay: 0ms
    float: right
    
  .wrap
    background-color: white
    position: relative
    width: 100%
    height: 100%
    overflow: hidden

  .label-value
    position: absolute
    z-index: 1
    color: white
    pointer-events: none
    font-size: 18px
    top: 16px
    transition: .4s cubic-bezier(0.230, 1.000, 0.320, 1.000)
    transition-property: color, transform;

  .is-close-zero
    color: #9B9B9B

  .gauge
    position: absolute;
    background-color: #ECDF61
    width: 100%
    height: 100%
    top: 0
    left: 0
    z-index: 0
    pointer-events: none
    transition: transform .4s cubic-bezier(0.230, 1.000, 0.320, 1.000)
    transform: translate3d(-100%, 0, 0)