@slider-width: 16px;

.slider {
  position: relative;

  > .dragger {
    background: @purple;

    border-radius: @slider-width;
    width: @slider-width;
    height: @slider-width;
    box-shadow: 0 0 0 3px #fff;
  }

  > .dragger:hover {
    background: @purple-dark;
  }

  > .track {
    width: auto !important; // overwrite inline styles
    background: @white-darkest;
    border-radius: 8px;
    height: 3px;
    left: -(@slider-width / 2);
    right: -(@slider-width / 2);
  }

  > .value {
    top: -29px;
    position: absolute;
    right: -(@slider-width / 2);
    // width: 80px;
    color: @60;
    text-align: right;
  }
}
