Ergebnis 1 bis 4 von 4
  1. #1
    sascha83 ist offline Mitglied
    registriert
    09-03-2015
    Beiträge
    40

    Slider (input[range]) auf gespeicherten Wert setzen

    Hallo,

    ich nutze in einem Formular einen Slider. Meine Fragen dazu sind:
    1) Wie kann ich den Slider beim Laden auf den im localstorage gespeicherten Wert setzen?
    2) Wie kann ich beim Schieben den aktuellen Wert neben dem Slider anzeigen? Dachte es würde über das <output>-Tag funktionieren?!

    Ich habe jetzt einmal alles 'klickbar' in folgenden Code ausgelagert:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <input type="range" id="slider" min="0" max="180" step="1">
        <output for="slider" id="degree">90</output>
        <p>
            <button id="save">Save</button>
            <button id="show">Show</button>
            <button id="set">Set</button>
        </p>    
        <script>
            function saveValue() {
                var cAngle = document.getElementById('slider').value;
                localStorage.setItem('degree', cAngle);
                document.getElementById('degree').innerHTML = cAngle;
                return cAngle;
            }
            
            function getValue() {
                alert(localStorage.getItem('degree'));    
            }
    
            function setValue() {
                //  - gespeicherten Wert auf Range setzen
                //  - gespeicherten Wert in document.getElementById('slider').innerHTML setzen
            }
            
            document.getElementById('save').addEventListener('click', saveValue);
            document.getElementById('show').addEventListener('click', getValue);
            document.getElementById('set').addEventListener('click', setValue);
        </script>
    </body>
    </html>
    Vielen Dank im Voraus für Eure Hilfe.
    Geändert von mikdoe (27-04-2015 um 08:36 Uhr) Grund: gelöst gesetzt

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Slider (input[range]) auf gespeicherten Wert setzen

    Zitat Zitat von sascha83 Beitrag anzeigen
    Wie kann ich den Slider beim Laden auf den im localstorage gespeicherten Wert setzen?
    Genauso wie du den Wert ausliest, kannst du ihn doch aus reinschreiben:
    Code:
    document.getElementById('slider').value = localStorage.getItem('degree') || 0;
    Zitat Zitat von sascha83 Beitrag anzeigen
    Dachte es würde über das <output>-Tag funktionieren?!
    Das for-Attribut hat nicht den Effekt, dass der Wert des <output>s automatisch gesetzt wird, das musst du schon selber in JS implementieren.
    Also im input- oder change-Event des slider einfach
    Code:
    OUTPUT.value = SLIDER.value
    ausführen.

  3. #3
    sascha83 ist offline Mitglied
    registriert
    09-03-2015
    Beiträge
    40

    AW: Slider (input[range]) auf gespeicherten Wert setzen

    Vielen Dank für die Hilfe: PROBLEM GELÖST

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Slider (input[range]) auf gespeicherten Wert setzen

    Zitat Zitat von sascha83 Beitrag anzeigen
    Vielen Dank
    Bitte - gern geschehen.

Ähnliche Themen

  1. Antworten: 5
    Letzter Beitrag: 17-04-2015, 11:41
  2. Range Slider Plugins
    Von Haxy123 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 20-07-2014, 18:21
  3. jqueryUI slider mehrere werte setzen
    Von Kommissar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 15-04-2013, 22:20
  4. wert onload setzen
    Von dominik_1984 im Forum JavaScript
    Antworten: 27
    Letzter Beitrag: 31-01-2009, 02:25
  5. VAR Wert ausserhalb der Funktion setzen
    Von tobby im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 07-04-2003, 19:19

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •