<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;

		}
	});

})();