How to display input value on page in Javascript?

What you did puts the value of the input in the paragraphe on load. Plus you need an EventListener in order to track the input changes, like so:

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
rangeInput.addEventListener("input", ()=>{
 valueInp.innerHTML = rangeInput.value;
})

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
rangeInput.addEventListener("input", () => {
  valueInp.textContent = rangeInput.value;
});
valueInp.textContent = rangeInput.value;

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>```

Provided that the <p> element for the value will always be following directly after your range element then the following script will take care of any number of range/value combinations:

document.querySelectorAll(".range")
.forEach(r=>r.addEventListener("input",update(r)));

function update(r){
  const ur= ()=>r.nextElementSibling.textContent=r.value;
  ur();
  return ur;
}

<input type="range" min="1" max="100" value="40" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="20" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="30" step="1" class="range"/>
<p></p>

Try this :

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
range.addEventListener("change",()=>{
   valueInp.innerHTML = rangeInput.value;
})
valueInp.innerHTML = rangeInput.value;

addEventListener here will be executed whenever value inside input tag is changed .

• You need to wire-up an event-listener on the <input/> which then updates the <p class="value"> in the event-handler.
• You can only wire-up event-handlers after DOMContentLoaded btw.
• There are two main events you can listen to:
  • Use the 'input' event to respond to every change-in-value, even while the <input> element has focus.
  • Use the 'change' event to only respond to changes when the user has stopped interacting with the input.
• BTW, you should use an <output> element instead of <p> for showing "output" values.
• You should use id to select specific elements instead of .className selectors because class="" is not unique.
• Never use innerHTML for showing text as it opens you up to XSS attacks.
  • For <output> you can set HTMLOutputElement.value.
  • For all other elements, use textContent.
  • Or innerText.

Like so:

window.addEventListener( 'DOMContentLoaded', onDomLoaded );

function onDomLoaded() {

    const rangeInput = document.getElementById('myRangeInput');
    const output     = document.getElementById('myOutput');

    // Show initial value immediately:
    output.textContent = rangeInput.value;

    // 'input' is the name of the event-type, not the <input> element name.
    // you can also use 'change' instead.
    rangeInput.addEventListener( 'input', e => {
        output.textContent = rangeInput.value;
    } );
}

<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" class="range"/>
<output id="myOutput" for="myRangeInput"></output>

If you want something really succinct, then just update the <output> dire use a named <output> the oninput="" attribute, like so:

<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" oninput="document.getElementById('myOutput').value = this.value;" />
<output id="myOutput" for="myRangeInput"></output>