Range slider per Javascript verändern

Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!

Zu der Infoseite von „Die Mo-Mo-Manie“

    Ich habe leider keinen passenderen Bereich gefunden...
    Ich möchte bei einem Slider abhängig von dessen Wert die Farbe ändern. Da kommt dann ja Javascript ins Spiel. Momentan springt da aber gar nix an. Schaut so aus:


    [HTML]<input type="range" id="input">[/HTML]

    Code
    document.getElementById("input").style.background-color = "000000";


    Bis her hat weder color, background-color, bg-color oder backgroundColor funktioniert...


    Live seht ihr es hier: Link

    Also auf der Live-Seite hat das Bild nicht diese ID, sofern das überhaupt die gleiche Seite ist oder du lokal an einer anderen arbeitest. Der Seite fehlt übrigens ein Doctype. Unwahrscheinlich dass es daran liegt, aber je nach Browser kann das unterschiedliche Effekte haben. Laut meinem Code funktioniert das tadellos. Ich verwende aber auch jQuery dafür. Hier auf jsFiddle.

    "Ich bin ein Zeuge der Zeit, als Pokémon an der Spitze war! Als es noch 150 bzw. 151 gab. In Ehren an die Serie, die Spiele und der daraus entstandenen Lebenseinstellung taufe ich diese Generation (geboren in den 90ern) die Pokémon-Generation."

    Um jetzt noch den Wunsch der Farbänderung hereinzubringen: http://jsfiddle.net/TimWolla/9cDd6/3/


    JavaScript
    $(document).ready(function() {    // tested in FF 23.0.1    $("#input").on('change click focus blur', function() {       $(this).css("background-color", 'rgba(' + $(this).val() + ', 0, 0, 1)');     }).click();});


    HTML
    <input type="range" id="input" min="0" max="255" value="255">


    Generell gilt aber: Die nativen Browserelement (insb. ProgressBars) sind relativ schwierig mit CSS zu gestalten.

    Natürlich geht das auch direkt mit JavaScript:


    JavaScript
    document.getElementById('input').click = document.getElementById('input').change = document.getElementById('input').focus = document.getElementById('input').blur = function () {
    document.getElementById('input').style.backgroundColor = 'rgba(' + document.getElementById('input').value + ', 0, 0, 1)';
}
document.getElementById('input').click();