Is there a reason why my sliders aren't working with the code I have used? [Solved]-CodePudding

Is there something wrong with the way I have formatted it or will I have to go the JavaScript route? I'm looking for the code to update automatically to whatever number I have set the slider to or vise versa.

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div> 

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div> 

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div> 

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div> 

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div> 

        <div>
            <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
            <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
        </div>

CodePudding user response：

All I had to do was wrap it in the form tag. Like so...

        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>
        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>
        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>
        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>
        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>
        <form>
            <div>
                <input  id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
                <input  id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
            </div> 
        </form>

CodePudding user response：

It would be better to call a simple function to get the other input and set it's value regardless of ID. This goes to the parent element and then finds the child that doesn't match the same type of the initial input and sets it's value.

Just for future reference, it is not good practice to have elements with the same ID: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute

function setValue(input) {
  let val = input.value;
  let selector = `input:not([type=${input.getAttribute('type')}])`;
  let otherInput = input.parentElement.querySelectorAll(selector);
  otherInput[0].value = val;
}

<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
  <input  type="number" value="10" min="0" max="50" oninput="setValue(this)">
  <input  type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>