The rewritten title is: How to make an autofill slider with a gradient background in HTML

Question

I'm just playing around with HTML and I want to make a slider that fills itself with a gradient, but I'm finding this to be nearly impossible. I've been researching for a few hours but can't seem to find the answer.

I think I need JS, but I'm completely blank there.

.slidecontainer {
  justify-content: center;
  bottom: 0px;
  margin-left: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
</div>

I have tried the method mentioned above. I've been trying stuff from this site (https://codepen.io/kaiquenunes23/pen/LYEvegK) but I can't control it.

I also read multiple other threads on StackOverflow.

Answer 1

Try this

Answer 2

JS is required to get the current position of the thumb.

This code snippet does this by reading the position on the slider and calculating the percentage of its movement. It then sets the CSS variable --pc to that percentage value.

The slider has two background images, the first is the thumb transparent background image and then the gray color you want. "Below it" is a second background image, which is any linear gradient you want.

This way, when you move the slider to the right, the linear gradient will show up.

const slider = document.getElementById("myRange");
slider.addEventListener("input", update);

function update() {
  const pc = (slider.value - slider.min) / (slider.max - slider.min) * 100 + '%';
  slider.style.setProperty('--pc', pc);
}

.slidecontainer {
  justify-content: center;
  bottom: 0px;
  margin-left: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 100%;
  height: 25px;
  --pc: 0;
  background: linear-gradient(to right, transparent 0 var(--pc), #d3d3d3 var(--pc) 100%), linear-gradient(to right, red, green);
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}