.uv {
  @track-color: @gray-light;
  @thumb-color: @gray;
  @thumb-border: @text-color;
  @focus-border: 2px solid @link-color;
  @focus-track-color: lighten(@track-color, 10%);

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
  }

  /* WebKit */
  input[type="range"]::-webkit-slider-runnable-track {
    height: 0.25rem;
    background-color: @track-color;
    border: none;
    border-radius: 999px;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    margin-top: -5px;
    background-color: @thumb-color;
    border: 2px solid @thumb-border;
    border-radius: 999px;
  }

  input[type="range"]:focus::-webkit-slider-thumb {
    margin-top: -7px;
  }

  input[type="range"]:focus::-webkit-slider-runnable-track {
    background-color: @focus-track-color;
    border: @focus-border;
  }

  /* Firefox */
  input[type="range"]::-moz-range-track {
    height: 0.25rem;
    background-color: @track-color;
    border: none;
    border-radius: 999px;
  }

  input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    margin-top: -0.5rem;
    background-color: @thumb-color;
    border: 2px solid @thumb-border;
    border-radius: 999px;
  }

  input[type="range"]:focus::-moz-range-track {
    background-color: @focus-track-color;
    border: @focus-border;
  }

  /* IE */

  input[type="range"]::-ms-track {
    width: 300px;
    height: 5px;

    /* remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /* leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /* remove default tick marks */
    color: transparent;
  }

  input[type="range"]::-ms-fill-lower {
    background: @gray-light;
  }

  input[type="range"]::-ms-fill-upper {
    background: @gray-light;
  }

  input[type="range"]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: @gray;
  }

  input[type="range"]:focus::-ms-fill-lower {
    background: @gray-light;
  }

  input[type="range"]:focus::-ms-fill-upper {
    background: @gray-lighter;
  }
}