.slider {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  height: 7px;
  margin: 5px 0;

  .slider-handle {
    position: absolute;
    width: 15px;
    height: 15px;
    top: -5px;
    margin-left: -10px;
    border-radius: 3px;
    background-color: #eee;
    border: 1px solid #666;
  }

  .slider-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    border-radius: 3px;
  }

  &.disabled {
    cursor: not-allowed;

    .slider-handle {
      border-color: #aaa;
      background-color: #ccc;
    }

    .slider-bar {
      background-color: #aaa;
      opacity: 0.6;
    }
  }

  &.active {
    .slider-handle {
      backround-color: #ccc;
    }
  }
}
