How to get value of <input type="range" min="40"max="100"> and release it in css width pixl ?

Question

Look to my code
https://code.sololearn.com/WR2r089qdmew/?ref=app

Answer 1

You have several errors in your code.

1. You have named the function rf() but used fr() in the html.

2. Use oninput instead of onclick in line 46 of HTML section.

3. The value of min and max attribute should be 50 and 700 instead of 50px and 700px.

4. Use style.width instead of style.width.value.

5. Add 'px' after the value of style.width.

Correction of line 46 of HTML:

<input oninput="rf()" type="range" id="rng" name="points" min="50" max="700">

Correction of rf() function:

function rf (){
document.getElementById('tbl').style.width = document.getElementById('rng').value+"px";
}

Answer 2

Add oninput="changeWidth()" to the input tag
then add following script:

function changeWidth(){
var el=document.querySelector('#rng')
var w=el.value

var tbl=document.querySelector('#tbl')
tbl.style.width=w
}

Answer 3

Try this:

<form onsubmit="func()">
<input type=number id="input"/>
<input type=submit/>
</form>
<div id="element" style="width:50px; border: 1px solid black"></div>
<script>
function func(){
var width = document.getElementById("input").value + "px";
document.getElementById("element").style.width = width;
}
</script>

https://code.sololearn.com/W56V98gNvlvD/?ref=app