✔ mit input type range css verändern

[rernanded]

Hallo
js ist ja nicht so meine Sache, deshalb schaffe ich es nicht mit meinem input die border-Stärke zu verändern.
Und zwar ohne das ich die Maus dabei loslassen muß damit der Wert sich ändert. Moni

<div>
    <input type="range" id="rangeinput" min="1" max="30" value="1" onchange="rangevalue.value=value"/>
    <output id="rangevalue">1</output>
</div>
<script>
var rangeInput = document.getElementById("rangeinput").value;
document.getElementById("div0").style.border = "rangeInput+px";
</script>
<div id="div0" style="border: solid 1px red;">
wow
</div>

 

[merzi86]

Hallo rernanded,
dein Problem ist hier nicht nur auf Basis von JS, sondern auch auf Basis von CSS.
Die Property, die du ändern willst ist borderWidth und nicht border.

Zusätzlich dieser Code:

document.getElementById("div0").style.border = "rangeInput+px";

Würde innerhalb der border Property den Text "rangeInput+px" setzen.
Ich würde sagen du bist ein bisschen zu sehr in PHP und setzt vorraus, das alle Variable, die in " stehen auch ausgegeben werden.
Richtig wäre es so:

document.getElementById("div0").style.border = rangeInput+"px";

Dein Event setzt zwar ein value im Object rangevalue, aber dies wird zumindest in dem Teil des Quellcodes nicht gesetzt.
So hier mal eine Funktionierende Variante:

<div>
    <input type="range" id="rangeinput" min="1" max="30" value="1" onmousemove="document.getElementById('div0').style.borderWidth = this.value+'px';"/>
    <output id="rangevalue">1</output>
</div>
<script>
var rangeInput = document.getElementById("rangeinput").value;
document.getElementById("div0").style.borderWidth= rangeInput+"px";
</script>
<div id="div0" style="border: solid 1px red;">
wow
</div>

Hoffe das ist so, wie du es dir vorstellst.

Schönes WE dann noch.

 

[rernanded]

@merzi86

C'est ça. Merci Merzi.