JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<div class="range">
	<input type="range" min="0" max="100" step="1">
  <p>
  value: <span id="value"></span>
  </p>
</div>
<div class="range">
	<input type="range" min="0" max="100" step="1">
</div>

CSS

.range {
  height: 8px;
  max-width: 100%;
  width: 100%;
  position: relative;
  border: none;
  border-radius: 20px;
  margin: 20px 0;
}
.range [type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 30px;
}
.range [type=range]:focus {
  outline: none;
}
.range [type=range]::-webkit-slider-runnable-track {
  background: transparent;
}
.range [type=range]::-moz-range-track {
  background: transparent;
}
.range [type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16), 0 3px 3px 0 rgba(0, 0, 0, 0.23);
}

.range {
  max-width: 80%;
}
@media (max-width: 1000px) {
  .range {
    max-width: 100%;
  }
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5%;
  flex-direction: column;
}

JavaScript

var RangeSlider = (function() {
	var elRangeInputs = document.querySelectorAll(".range");

	function setProgress(elTarget) {
		var elRangeBar = elTarget.parentElement;
		var intThumbWidth = elRangeBar.clientHeight * 3;
		var intRangeBarWidth = elRangeBar.clientWidth - intThumbWidth;
		var intThumbWidthOffset = intThumbWidth / 2;
		
		var intProgressPosition = (elTarget.value - elTarget.min) / (elTarget.max - elTarget.min);
		var intRangePosition = (intRangeBarWidth * intProgressPosition) + intThumbWidthOffset;
		

		elRangeBar.style.background =
			"linear-gradient(to right, #1289ED " +
			intRangePosition + "px, #D4D8E1 " +
			intRangePosition + "px";
	}

	for (var i = 0; i < elRangeInputs.length; i++) {
		elRangeInputs[i].firstElementChild.addEventListener("input", function() {
			setProgress(this);
		});

		setProgress(elRangeInputs[i].firstElementChild);
	}
})();