<div class="range-slider">
  <div class="range-group">
    <input class="range-input" id="location-range-slider" value="1" min="1" max="4" type="range" />
  </div>
</div><!-- // range-slider -->

<!-- With number fields -->
<div class="filter level-filter level-req">
  <div id="rangeSlider" class="range-slider">
    <label>Levels:</label>

    <div class="number-group">
      <input class="number-input" type="number" value="10" min="0" max="50" /> to 
      <input class="number-input" type="number" value="50" min="0" max="50" />
    </div>

    <div class="range-group">
      <input class="range-input" value="10" min="1" max="50" step="1" type="range" />
      <input class="range-input" value="50" min="1" max="50" step="1" type="range" />
    </div>
  </div>
</div><!-- // filter level-filter -->

.range-slider {
  display: flex;
  flex-flow: row wrap;
  align-items: center; 
  // margin-bottom: 30px; 

  label {
    color: #fff; 
    font-size: 13px; 
  }

  .number-group {
    flex: 1 0 auto; 
    text-align: right; 
    height: 30px; 
    font-weight: 300; 
    font-size: 13px; 
    color: #fff; 

    .number-input {
      width: 36px; 
      height: 30px; 
      text-align: center; 
      color: #3FAFFA; 
      background-color: #3D3E3F; 
      border: 0; 

      &:first-of-type {
        margin-right: 7px; 
      }

      &:last-of-type {
        margin-left: 7px; 
      }

      // vendor-prefix exception
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }

      &:invalid,
      &:out-of-range {
        border: 2px solid red; 
      }

    }

  }

  .range-group {
    position: relative; 
    flex: 0 0 100%; 
    height: 47px; 
    
    .range-input {
      position: absolute; 
      left: 0; 
      bottom: 0; 
      margin-bottom: 0; 
      -webkit-appearance: none; // vendor-prefix exception
      width: 100%; 
      border-bottom: 0; 

      &:focus {
        outline: 0; 

        // doesn't seem to allow the track colour to change
        // &::-webkit-slider-runnable-track, 
        // &::-ms-fill-lower, 
        // &::-ms-fill-upper {
        //  background: $primary-color; 
        // }

      }
      
      // vendor prefix exceptions - must be kept seperate to work
      &::-webkit-slider-runnable-track {
        width: 100%; 
        height: 2px; 
        cursor: pointer; 
        // animate: .2s;
        animation: .2s; 
        background: #3FAFFA; 
        border-radius: 1px; 
        box-shadow: none; 
        border: 0; 
      }
      
      &::-webkit-slider-thumb {
        z-index: 2; 
        position: relative; 
        // box-shadow: 0px 0px 0px #000;
        // border: 1px solid #2497e3;
        height: 18px; 
        width: 18px; 
        border-radius: 50%; 
        background: #3FAFFA; 
        cursor: pointer; 
        -webkit-appearance: none; 
        margin-top: -7px; 
      }
      
      &::-moz-range-track {
        width: 100%; 
        height: 2px; 
        cursor: pointer; 
        // animate: .2s;
        animation: .2s; 
        background: #3FAFFA; 
        border-radius: 1px; 
        box-shadow: none; 
        border: 0; 
      }
      
      &::-moz-range-thumb {
        z-index: 2; 
        position: relative; 
        box-shadow: 0px 0px 0px #000;
        border: 1px solid #2497e3;
        height: 18px; 
        width: 18px; 
        border-radius: 50%; 
        background: #3FAFFA; 
        cursor: pointer; 
      }
      
      &::-ms-track {
        width: 100%; 
        height: 5px; 
        cursor: pointer; 
        // animate: .2s;
        animation: .2s; 
        background: transparent; 
        border-color: transparent; 
        color: transparent; 
      }
      
      &::-ms-fill-lower,
      &::-ms-fill-upper {
        background: #3FAFFA; 
        border-radius: 1px; 
        box-shadow: none; 
        border: 0; 
      }
      
      &::-ms-thumb {
        z-index: 2; 
        position: relative; 
        // box-shadow: 0px 0px 0px #000;
        // border: 1px solid #2497e3;
        height: 18px; 
        width: 18px; 
        border-radius: 50%; 
        background: #3FAFFA; 
        cursor: pointer; 
      }

    }

  }

}


/* for demo purposes */
body {
  background-color: #323334; 
}

.range-slider, 
.filter {
  margin: 0 auto 30px; 
  max-width: 50%; 
}

(function() {

  var parent = document.querySelector("#rangeSlider");
  if(!parent) return;

  var
  rangeS = parent.querySelectorAll("input[type=range]"),
    numberS = parent.querySelectorAll("input[type=number]");

  rangeS.forEach(function(el) {
    el.oninput = function() {
      var slide1 = parseFloat(rangeS[0].value),
        slide2 = parseFloat(rangeS[1].value);

      if (slide1 > slide2) {
        [slide1, slide2] = [slide2, slide1];
        // var tmp = slide2;
        // slide2 = slide1;
        // slide1 = tmp;
      }

      numberS[0].value = slide1;
      numberS[1].value = slide2;
    }
  });

  numberS.forEach(function(el) {
    el.oninput = function() {
      var number1 = parseFloat(numberS[0].value),
        number2 = parseFloat(numberS[1].value);

      if (number1 > number2) {
        var tmp = number1;
        numberS[0].value = number2;
        numberS[1].value = tmp;
      }

      rangeS[0].value = number1;
      rangeS[1].value = number2;

    }
  });

})();