@mixin rangexThumb {
  width: 18px;
  height: 18px;
  margin: -8px 0  0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

@mixin rangexTrack {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}

.rangex {
  position: relative;
  width: 550px;
  height: 5px;
}

.rangex input {
  width: 100%;
  position: absolute;
  top: 2px;
  height: 0;
  -webkit-appearance: none;

  // Thumb
  &::-webkit-slider-thumb {
    -webkit-appearance: none; // needed again for Chrome & Safari
    @include rangexThumb;
  }

  &::-moz-rangex-thumb {
    @include rangexThumb;
  }

  &::-ms-thumb {
    @include rangexThumb;
  }

  // Track
  &::-webkit-slider-runnable-track {
    @include rangexTrack;
  }

  &::-moz-rangex-track {
    @include rangexTrack;
  }

  &::-ms-track {
    @include rangexTrack;
  }

  &:focus { // override outline/background on focus
    background: none;
    outline: none;
  }

  &::-ms-track { // A little somethin' somethin' for IE
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
}

// Labels below slider
.rangex-labels {
  margin: 18px -41px 0;
  padding: 0;
  list-style: none;
  
  li {
    position: relative;
    float: left;
    width: 90.25px;
    text-align: center;
    color: #b2b2b2;
    font-size: 14px;
    cursor: pointer;
    
    &::before {
      position: absolute;
      top: -25px;
      right: 0;
      left: 0;
      content: "";
      margin: 0 auto;
      width: 9px;
      height: 9px;
      background: #b2b2b2;
      border-radius: 50%;
    }
  }
  
  .active {
    color: #37adbf;
  }
  
  .selected::before {
    background: #37adbf;
  }
  
  .active.selected::before {
    display: none;
  }
}