Input range styled css sass

range.scss

// Input range sass thing. Result of reading this: 
// http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
// 07112018: removed focus outline i firefox

$range-track-width: 100%;
$range-track-height: 12px;
$range-track-background: #ccc;
$range-track-background-focus: #ccc;
$range-track-border: none;
$range-track-border-radius: 3px;
$range-thumb-width: 40px;
$range-thumb-height: 40px;
$range-thumb-background: green;
$range-thumb-border: none;
$range-thumb-border-radius: 50%;  
// -(thumb height / 2) - (track height / 2) 
$range-webkit-slider-thumb-margin-top: 
  calc((calc(-#{$range-thumb-width} / 2) - calc(-#{$range-track-height} / 2)));

@mixin range-track {
  border: $range-track-border;
  width: $range-track-width;
  height: $range-track-height;
  background: $range-track-background;
  border-radius: $range-track-border-radius;
}

@mixin range-thumb {
  border: $range-thumb-border;
  width: $range-thumb-width;
  height: $range-thumb-height;
  border-radius: $range-thumb-border-radius;
  background: $range-thumb-background;    
  border: 1px solid #fff;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  cursor: pointer;
  &:hover, &:focus, &:active {
    background: rgba(40, 167, 69, 0.5);;    
  }

}

input[type=range] {

  -webkit-appearance: none;
  width: $range-track-width;

  &::-webkit-slider-runnable-track {
    @include range-track();
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: $range-webkit-slider-thumb-margin-top;
    @include range-thumb();
  }

  &:focus {
    outline: none;
  }

  &:focus::-webkit-slider-runnable-track {
    background: $range-track-background-focus;
  }

  // apply FF only rules
  @supports (-moz-appearance:none) {
    /* 
      fix for FF unable to apply focus style bug  
      note: this is fixed as of version 60: 
      https://bugzilla.mozilla.org/show_bug.cgi?id=712130
    */
     border: 1px solid transparent; 
  }

  
  &::-moz-range-track {
    @include range-track();
  }

  &::-moz-range-thumb {
    @include range-thumb();
  }

  /*
    hide the outline behind the border
  */
  &:-moz-focusring{
    outline: 1px solid transparent;
    outline-offset: -1px;
  }

  &::-moz-focus-outer {
    border: 0;
  }

  &:focus::-moz-range-track {
    background: $range-track-background-focus;
  }


  &::-ms-track {
    width: $range-track-width;
    height: $range-track-height;
    
    /*
      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: 20px 0;

    /*
      remove default tick marks
    */
    color: transparent;
  }
  &::-ms-fill-lower {
    background: #777;//#777;//$range-track-background;
    border-radius: 10px;
  }
  &::-ms-fill-upper {
    background: #ddd;//#888;//$range-track-background;
    border-radius: 10px;
  }
  &::-ms-thumb {
    @include range-thumb();
    // edge
    @supports (-ms-ime-align: auto) {
      & {
        margin-top:-4px;
      }
    }
  }
  &:focus::-ms-fill-lower {
    background: #888;//$range-track-background-focus;
  }
  &:focus::-ms-fill-upper {
    background: #ccc; //$range-track-background-focus;
  }

}