slider.scss

$bar-height: 2px;
$click-region-height: 18px;
$handle: 32px;
$color: #3f51b5;
$transition: 0.18s;
$background: #c8c8c8;

slider, [slider] {
  display: inline-block;
  position: relative;
  height: $click-region-height;
  width: 100%;
  margin: 25px 5px 25px 5px;
  vertical-align: middle;

  div {
    white-space: nowrap;
    position: absolute;

    &.bar-container {
      display: flex;
      justify-content: center;
      flex-flow: column;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .bar {
        width: 100%;
        height: $bar-height;
        overflow: hidden;

        .bar-content {
          background-color: $background;
          width: calc(100% - #{$handle});
          margin-left: $handle / 2;
          height: 100%;

          &.active {
            background-color: $color;

            &.transiting {
              transition: width $transition ease;
            }
          }
        }

        .selection {
          width: 0%;
          height: 100%;
          background: #13b6ff;
        }
      }
    }


    &.handle {
      cursor: pointer;
      width: $handle;
      height: $handle;
      top: 1 + ($click-region-height - $handle) / 2;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;

      &.transiting {
        transition: left $transition ease;
      }

      .inner {
        height: 12px;
        width: 12px;
        border-radius: 100%;
        background-color: $color;
        position: initial;
        transition:
          height $transition ease,
          width $transition ease,
      }

      &.active {
        .inner {
          height: 32px;
          width: 32px;
        }
      }
    }

    &.bubble {
      display: none;
      cursor: default;
      top: -$handle;
      padding: 1px 3px 1px 3px;
      font-size: 0.7em;
      font-family: sans-serif;

      &.active {
        display: inline-block;
      }

      &.limit {
        color: #777;
      }

      &.value {
        z-index: 3;
      }
    }
  }
}