Why is the text field completely empty upon load and stays empty regardless of my slider value?

Subquestion: Should they be linked? If I enter a value in the input text field, should the slider move accordingly?

```js
    var slider = document.getElementById("myRange"); 
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; 
    slider.oninput = function() 
    { output.innerHTML = this.value; }
```

```css
   .slidecontainer { width: 100%; } 

    .slider { -webkit-appearance: none; width: 100%; height: 25px;
    background: #d3d3d3; outline: none; opacity: 0.7;
    -webkit-transition: .2s; transition: opacity .2s; }

    .slider:hover { opacity: 1; } 

    .slider::-webkit-slider-thumb { -webkit-appearance: none;
    appearance: none; width: 25px; height: 25px; background:
    #4CAF50; cursor: pointer; } 

    .slider::-moz-range-thumb { width: 25px; height: 25px;
    background: #4CAF50; cursor: pointer; } 
```

```html
 <div class="slidecontainer"> 
    <input type="range" min="1000" max="5000000"
    value="250000" class="slider" id="myRange"> 
    <input type="text" id="demo" value=""> 
    </div> 
```