Umgeschriebener Titel: So erstellen Sie einen Autofill-Schieberegler mit Verlaufshintergrund in HTML

Question

Ich spiele gerade mit HTML herum und möchte einen Schieberegler erstellen, der sich selbst mit einem Farbverlauf füllt, aber ich finde, das ist nahezu unmöglich. Ich habe ein paar Stunden lang recherchiert, kann aber scheinbar keine Antwort finden.

Ich glaube, ich brauche JS, aber da bin ich völlig leer.

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

Ich habe die oben genannte Methode ausprobiert. Ich habe Dinge von dieser Website ausprobiert (https://codepen.io/kaiquenunes23/pen/LYEvegK), aber ich kann sie nicht kontrollieren.

Ich habe auch mehrere andere Threads auf StackOverflow gelesen.

Answer 1

试试这个

Answer 2

需要JS来获取拇指的当前位置。

此代码片段通过读取滑块上的位置并计算其移动的百分比来实现此目的。然后它将 CSS 变量 --pc 设置为该百分比值。

滑块有两个背景图像，第一个是拇指透明的背景图像，然后是您想要的灰色。 “在它下面”是第二个背景图像，它是您想要的任何线性渐变。

这样，当您将滑块向右移动时，线性渐变就会显示出来。

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