JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<div class="sliderContainer">
  <input type="range" min="1" max="100" value="1" id="myRange1" class="slider">
  <p>
  Value: <span id="value1"></span>
  </p>
  
  <input type="range" min="1" max="100" value="1" id="myRange2" class="slider">
  <p>
  Value: <span id="value2"></span>
  </p>
</div>


<!-- <div class="sliderContainer">
  <input type="range" min="1" max="100" value="1" id="myRange" class="slider">
  <p>
  Value: <span id="value"></span>
  </p>
  
  <input type="range" min="1" max="100" value="1" id="myRange" class="slider">
  <p>
  Value: <span id="value"></span>
  </p>
</div> -->

CSS

body{
  background: rgb(110, 110, 110);
  color: black;
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  font-size: 2rem;
}

.sliderContainer{
  width: 75%;
  margin-top: 200px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 0.8rem;
  background: linear-gradient(90deg, #D4D8E1 60%, #D4D8E1 60%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2%;
  border-radius: 12px;
  box-shadow: 0px 1px 10px 1px black;
}

.slider:hover {
  opacity: 1;
}


.slder::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.slder::-moz-range-thumb {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

p {
  margin-top: 50px;
  opacity: 0.7;
}

.slder::after {
  content: '100';
  color: white;
  font-size: 2rem;
  position: absolute;
  left: 80%;
  top: 26%;
}
.slder::before {
  content: '0';
  color: white;
  font-size: 2rem;
  position: absolute;
  left: 12%;
  top: 26%;
}

JavaScript

var slider1 = document.getElementById("myRange1");
var slider2 = document.getElementById("myRange2");
var output1 = document.getElementById("value1");
var output2 = document.getElementById("value2");

output1.innerHTML = slider1.value;
output2.innerHTML = slider2.value;

slider1.oninput = function() {
	output1.innerHTML = this.value;
}

slider2.oninput = function() {
	output2.innerHTML = this.value;
}

slider1.addEventListener("mousemove", function(){
	var x = slider1.value;
  var color = "linear-gradient(90deg, #1289ED " + x + "%, #D4D8E1 " + x + "%)";
  slider1.style.background = color;
})
slider2.addEventListener("mousemove", function(){
	var x = slider2.value;
  var color = "linear-gradient(90deg, #1289ED " + x + "%, #D4D8E1 " + x + "%)";
  slider2.style.background = color;
})



/* var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value;
}

slider.addEventListener("mousemove", function(){
  var x = slider.value;
  var color = "linear-gradient(90deg, #1289ED " + x + "%, #D4D8E1 " + x + "%)";
  slider.style.background = color;
}) */