请原谅，因为我是新手编码员。我有一个滑块，当我拖动它并用 span 标签显示它时输出一个值

<div class="slidecontainer">
    <input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>

<h4>Score: <span id="demo1"></span></h4>

<div class="login-box">
    <form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
        <div class="user-box">
            <input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
    </div>
    <div>
        <input type="text" id="txtInput1">
        </div>
        <ul class="actions">
            <li><button type="submit">Submit Score</button></li>
    </ul>
    </form>
</div>

链接到 javascript 代码

var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;   
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("input1", function() {
const slider1Value = this.value;
output1.innerText = input1Value;
input.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}

因为我想将滑块值的输出传递给表单标签，因为我想使用 API 将值提交给 googlesheet

一切正常，但是，每当我拖动滑块时，表单占位符上显示的值都不会更新。我想同步它们并实时更新。这可能吗？我错过了什么明显的东西吗？

请救救我。谢谢！