Slider bug in html-CodePudding

I was coding in html when I encounterd a simple problem. I am a beginner so i take most of my stuff from w3schools and for some reason this code did not work.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 16%;
    margin-top: -100px;
    margin-left: -200px;
}

  <link rel="stylesheet" href="uwu.css">
<body>

    <center><h1>How old are you?</h1></center>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div >
    <input type="range" min="1" max="18" value="1"  id="myRange">
  </div>
  <script src="slider.js"></script>

</div>

If you were also wondering jQuery is not added.

CodePudding user response：

I would rather do the width and heigth in the css with %, because px is a value that sometimes breaks if we make the screen smaller. But I can not answer the exact question about "Slider bug in html". You can look in the Net for some info. ;-)

CodePudding user response：

because you have no output add a header and give it id of demo