Tajuk yang ditulis semula: Cara membuat peluncur autoisi dengan latar belakang kecerunan dalam HTML

Question

Saya hanya bermain-main dengan HTML dan saya mahu membuat peluncur yang mengisi dirinya dengan kecerunan, tetapi saya mendapati ini hampir mustahil. Saya telah meneliti selama beberapa jam tetapi tidak dapat mencari jawapannya.

Saya rasa saya perlukan JS, tetapi saya benar-benar kosong di sana.

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

Saya telah mencuba kaedah yang dinyatakan di atas. Saya telah mencuba bahan dari tapak ini (https://codepen.io/kaiquenunes23/pen/LYEvegK) tetapi saya tidak dapat mengawalnya.

Saya juga membaca beberapa utas lain pada StackOverflow.

Answer 1

Cuba ini

Answer 2

JS diperlukan untuk mendapatkan kedudukan ibu jari semasa.

Coretan kod ini melakukan ini dengan membaca kedudukan pada peluncur dan mengira peratusan pergerakannya. Ia kemudian menetapkan pembolehubah CSS --pc kepada nilai peratusan itu.

Gelangsar mempunyai dua imej latar belakang, yang pertama ialah telus untuk ibu jari dan kemudian warna kelabu yang anda inginkan. "Di bawahnya" ialah imej latar belakang kedua, iaitu sebarang kecerunan linear yang anda mahukan.

Dengan cara ini, apabila anda menggerakkan peluncur ke kanan, kecerunan linear akan dipaparkan.

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