HTML Bereichseingang aktualisiert nicht seinen Wert

Question

ich einen Bereichseingang in meinem Markup erstellt und dessen Wert auf 0 gesetzt, etwa so:

<input type="range" min="0" max="100" step="10" value="0"> 

ich mag es um Stil basierend auf seinem aktuellen Wert. Nehmen wir an, ich möchte eine Marge von 50px geben, wenn der Wert "10" ist. Ich schreibe die folgende einfache CSS-Regel:

[type="range"][value="10"] { 
    margin-top: 50px; 
} 

Wenn der Bereichseingang bis 10 gleitet, erwartet man die Regel zu schießen, aber es funktioniert nicht. Es wird jedoch ausgelöst, wenn der Wert des Eingangs auf "10" im Markup gesetzt wird.

Fehle ich hier etwas? Gibt es wirklich keine Möglichkeit, einen Bereichseingang entsprechend seinem Wert zu gestalten, wie er vom Benutzer dynamisch geändert wird, nur mit CSS?

Answer 1

Der Wert der Eingabe und das Attribut Wert sind 2 getrennte Dinge. Das Wertattribut repräsentiert den Anfangswert des in Ihrem HTML angegebenen Elements. CSS kann nur auf dieses Attribut abzielen und kann leider nicht den tatsächlichen Wert des Elements festlegen. Sie können jedoch JavaScript verwenden, um den aktuellen Wert bei Änderung zu lesen, und anschließend das Wertattribut mit dem Wert der Eingabe aktualisieren. Dann können Sie dieses aktualisierte Attribut in CSS als Ziel verwenden.

document.getElementById('input').addEventListener('change',function() { 
 
    this.setAttribute('value',this.value); 
 
});

input[type="range"][value="10"] { 
 
    margin-top: 10px; 
 
} 
 
input[type="range"][value="20"] { 
 
    margin-top: 20px; 
 
}

<input id="input" type="range" min="0" max="100" step="10" value="0">