Titre réécrit : Comment créer un curseur de remplissage automatique avec un arrière-plan dégradé en HTML

Question

Je joue juste avec HTML et je veux créer un curseur qui se remplit d'un dégradé, mais je trouve que cela est presque impossible. Je fais des recherches depuis quelques heures mais je n'arrive pas à trouver la réponse.

Je pense que j'ai besoin de JS, mais je suis complètement vide là-bas.

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

J'ai essayé la méthode mentionnée ci-dessus. J'ai essayé des trucs sur ce site (https://codepen.io/kaiquenunes23/pen/LYEvegK) mais je ne peux pas le contrôler.

J'ai également lu plusieurs autres discussions sur StackOverflow.

Answer 1

Essayez ceci

Answer 2

JS est requis pour obtenir la position actuelle du pouce.

Cet extrait de code fait cela en lisant la position sur le curseur et en calculant le pourcentage de son mouvement. Il définit ensuite la variable CSS --pc sur cette valeur en pourcentage.

Le curseur a deux images d'arrière-plan, la première est transparente pour le pouce, puis la couleur grise souhaitée. "En dessous" se trouve une deuxième image d'arrière-plan, qui correspond au dégradé linéaire de votre choix.

De cette façon, lorsque vous déplacez le curseur vers la droite, le dégradé linéaire apparaîtra.

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