abe33/awesome_form

.range
  .controls
    border-radius: 18px
    // width: 350px
    overflow: hidden
    height: 32px
    margin: 0

    +relative

    +before
      border-radius: 26px
      overflow: hidden
      height: 32px

      +inset-box

      +box-sizing(border-box)
      +absolute
      +box(100%, 32px)

  output
    margin-top: $padding_4
    display: block
    text-align: center
    color: $grey_extra_dark
    background: $grey_light
    padding: $padding_4 $padding_4 $padding_6
    margin-bottom: -16px
    border-top-left-radius: 16px
    border-top-right-radius: 16px
    box-shadow: inset 0 1px 3px $grey_dark

  input.input
    background: transparent
    border: none
    box-shadow: none
    padding: 0
    z-index: 1
    cursor: pointer
    +relative

    &:active
      +animation(none)

    +range-track
      background: transparent
      border: none

      +box(100%, 32px)

    +range-thumb
      border: 1px solid $grey
      background: $grey_lighter
      border-radius: 50%
      box-shadow: 0 32px 10px $grey_very_dark, 0 $inset_bevel_size 0 $grey, 0 $inset_bevel_size 3px $grey_very_dark
      +box(32px, 32px)
      +box-sizing(border-box)

      +for-webkit
        margin-top: 0px

  &.has-errors
    .controls:before
      box-shadow: inset 0 1px $inset_bevel_size -1px $red

+downfrom-md
  .range
    .controls, output
      margin-left: 33.3%

    output
      margin-top: -32px