У меня есть диапазон ввода для изменения цвета, но он не работает

Question

Это мой код JS, я включу свой Git и большое спасибо за потраченное время. 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

Существует несколько проблем с вашим кодом, как указано в комментариях:

• Опечатка в обработчике slider.oniput, должна быть slider.oninput
• Опечатка ) в строке document.body.style.background, где вы использовали silider вместо slider
• Опечатка в значении HEX для одного из ваших цветов #2b22e43, оно должно быть #2b22e4

Вот фиксированный пример:

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>

Не уверен, что это тот эффект, который вы ищете, но он работает. Не стесняйтесь настраивать его, когда вы sh.

Answer 2

Синтаксическая ошибка, это не slider.oniput, а slider.oninput, вы пропускаете один N и пишете значение silider.value в $ {}.

Редактирование кода ниже.

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%)`
 }