我有一个范围输入来改变颜色，但它不起作用

Question

THis is my JS code, I wil laslo include my Git, and thank you so much for your time. https://github.com/bohorquez866/Rest-dish

var slider = document.getElementById("myRange");
 slider.oniput = () => {
 document.body.style.background = `linear-gradient(90deg, #2b22e43 ${slider.value}%,
     #2b2e43 ${silider.value}%, #ffffff ${silider.value}.1%, #ffffff ${slider.value}100%)`
}

Answer 1

There's a couple of issues with your code as mentioned in the comments:

• A typo in the slider.oniput handler, it should be slider.oninput
• Typo(s) in the document.body.style.background string where you used silider instead of slider
• Typo in the HEX value for one of your colors #2b22e43 , it should be #2b22e4

Here's a fixed example:

 var slider = document.getElementById("slider"); slider.oninput = () => { var currValue = slider.value; document.body.style.background = `linear-gradient(90deg, #2b22e4 ${currValue}%, #2b2e43 ${currValue}%, #ffffff ${currValue}.1%, #ffffff ${currValue}%)`; };

 <div> <input type="range" id="slider" name="volume" min="0" max="11" /> <label for="slider">slider</label> </div>

Not sure if this is the effect that you're looking for, but it works. Feel free to tweak it as you wish.

Answer 2

Is a syntax error, it's not slider.oniput is slider.oninput, you miss one N, and you write silider.value in the ${}.

Code edit below.

var slider = document.getElementById("myRange");
 slider.oninput = () => {
     document.body.style.background = `linear-gradient(90deg, #2b22e43 ${slider.value}%,
         #2b2e43 ${slider.value}%, #ffffff ${slider.value}.1%, #ffffff ${slider.value}100%)`
 }