How to sync slider value with form placeholder passthrough?

July 25, 2022

Pardon as I am a newbie coder. I have a slider that outputs a value as I drag it and display it with a span tag

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

which is linked to javascript code

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

because I want to pass the output of the slider value to a form tag because I want to submit the value to a googlesheet using API

everything is working, however, whenever I drag the slider the value displayed on the form placeholder is not updating. I want to sync them and update in real-time. Is this possible? Am I missing anything obvious?

Please save me. Thanks!

>Solution :

There was couple of mistakes, mostly in the naming of the variables, but the most important one is was inside your eventListener.

As you can see, the first element inside () should be the type of the event, not the name of the variable. So I’ve put change (see more info here), instead of input1.

Other changes are mostly typing errors, as I’ve said.

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("change", function() {
const slider1Value = this.value;
output1.innerText = slider1Value;
input1.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}

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