@blexar/framework/src/components/slider.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.slider
  position: relative
  display: flex
  align-items: center
  box-sizing: border-box
  margin-bottom: $margin

  &-input
    display: none
    width: auto
    max-width: 150px
    margin-bottom: 0
    @extend .input.is-tiny

  &-track
    position: relative
    flex: 1
    margin: 0.2em
    width: auto
    height: 0.3em
    background: $gray
    border-radius: $border-radius
    will-change: transfom

  &-handle
    position: relative
    position: absolute
    top: 0
    left: 0
    will-change: transform
    color: $black
    margin: -0.25em 0 0 -0.25em
    width: 0.8em
    height: 0.8em
    background-color: currentColor
    border-radius: 0.8em
    box-shadow: 0 1px 6px -2px alpha($black, 20%)
    border: 2px solid $white
  &-label
    position: absolute
    top: -3em
    left: 0.4em
    z-index: 999
    visibility: hidden
    padding: 6px
    min-width: 3em
    border-radius: $border-radius
    background-color: $black
    color: $white
    text-align: center
    font-size: $size-tiny
    line-height: 1em
    opacity: 0
    transform: translate(-50%, 0)
    white-space: nowrap

    &:before
      position: absolute
      bottom: -0.6em
      left: 50%
      display: block
      width: 0
      height: 0
      border-width: 0.6em 0.6em 0 0.6em
      border-style: solid
      border-color: $black transparent transparent transparent
      content: ''
      transform: translate3d(-50%, 0, 0)

  &-fill
    width: 100%
    height: 100%
    background-color: $gray
    transform-origin: left top
    
  &:hover,
  &.is-dragging
    .slider-label
      visibility: visible
      opacity: 1

  &.is-editable
    .slider-input
      display: block

  &.is-reverse
    flex-direction: row-reverse

  &.is-rounded
    .slider-handle,
    .slider-track,
    .slider-fill
      border-radius 10em
  generateSizes()