input type="range" gestalten - Bitte um Hilfe

  • Hallo Leute,


    mein Chef möchte, dass ich auf unserer Webseite mehrere Schieberegler einbaue.


    Diese Regler auf den Schienen soll man durch Eingabe der Werte hin und her verschieben können.


    Ich bekomme zwar die Ausgabe der Schieberegler hin, verstehe aber nicht wie ich ein Eingabefeld an der Seite platzieren kann um durch die Eingabe von Zahlen die Schieberegler einzustellen. Einfach mit der Maus ziehen soll man nicht unbedingt. Primär sollte es durch die Eingabe von Werten möglich sein.


    Kann jemand weiter helfen?


    Vielen Dank im Voraus
    Waldemar

  • Schau mal, ob dir dies weiter hilft:

    Code
    1. <input id="range" type="range" min="1" max="100" step="1"> <input id="input-for-range" type="text" pattern="[1-9][0-9]*">
    2. <script>
    3. document.getElementById("input-for-range").addEventListener("keyup", function () {
    4. var rng = document.getElementById("range");
    5. if (rng.validity.valid) rng.value = this.value;
    6. }) </script>
  • Hat super geholfen, Danke!


    Jetzt habe ich die nächste Herausforderung. Es sollen 6 dieser Schieberegler dargestellt werden.
    Alle mit unterschiedlichen Farben. Ich habe in die CSS den Style eingearbeitet wie 1 Schieberegler auszusehen hat. Was muss ich ergänzen bzw. verändern, damit jeder Schieberegler andere Farbe bekommt?


    So sieht mein Code aus




    UND CSS


  • 1. Ich hätte dir gleich ein Javascript anbieten sollen, das mehrere Slider unterstützt. Das neue benutzt jQuery; Du musst jQuery einbinden, damit es funktioniert.
    2. Wenn ich das richtig sehe, brauchst Du für jeden Slider nur ein Textinput.
    3. Damit Du jeden Slider unterschiedlich stylen kannst, musst Du ihm einen spezifischen Identifier geben, z. b. eine ID, die für jeden unterschiedlich ist.
    4. Das Stylen mit ::-webkit-slider-runnable-track funtioniert nicht in allen Browsern. Wenn ich das richtig sehe, ist das Stylen von Formularelementen so eine Sache. In deinem Fall könnte es angebracht sein, auf das input-range zu verzichten und einen Slider mit HTML und CSS zu bauen. CSS ist jedoch nicht meine Stärke und vielleicht kann dir jemand anders mehr dazu sagen.