1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 6.x Range Schieberegler

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Dani_T, 14. November 2023.

  1. Dani_T

    Dani_T New Member

    Registriert seit:
    14. November 2023
    Beiträge:
    3
    Zustimmungen:
    0
    Hallo zusammen

    Ich bin ein kompletter Neuling und das ist mein erster Post hier. Ich würde gerne eine Wordpress.org Seite erstellen, Habe mal mit Astra gestartet, aber wenn ihr was besseres empfehlt, nur zu (bin offen sofern es einigermassen Einsteigerfreundlich ist)

    Kern der Seite: In der Mitte der Homepage sollte ein Schieberegler sein, bei dem man eine Range von 0 bis 100 einstellen kann. Dabei soll es auf 0, 25, 50, 75 und 100 einrasten. Bei jedem Feld soll rechts davon je ein anderer Text mit Bild sowie ein Button erscheinen der zu einer Unterseite führt.

    Für jede der 5 Auswahlmöglichkeiten soll es je eine andere Unterseite geben.

    Habt ihr eine Idee wie ich das anstellen kann?

    Vielen Dank im Voraus!
     
    #1 Dani_T, 14. November 2023
    Zuletzt bearbeitet: 14. November 2023
  2. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.420
    Zustimmungen:
    603
    du erstellst dir einfach ein Seiten - Template mit der benötigten Funktion "Kern der Seite: In der Mitte der Homepage sollte ein Schieberegler sein"

    oder du erstellst dir über deine letzten 5 Beiträge ein Plugin, was deine gewünschte Darstellung abbilden kann.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dieser Code erstellt einen Schieberegler, der von 0 bis 100 geht und auf 0, 25, 50, 75 und 100 einrastet. Du kannst den aktuellen Wert des Schiebereglers mit JavaScript auslesen oder anzeigen, indem du ein Ereignis wie onchange oder oninput verwendest.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dieser Code zeigt den aktuellen Wert des Schiebereglers in einem span-Element an, wenn der Benutzer den Schieberegler bewegt.

    HTML input type = range | mediaevent.de

    Du kannst auch eine JavaScript-Bibliothek wie noUiSlider verwenden, um einen Schieberegler zu erstellen, der mehr Funktionen und Anpassungsmöglichkeiten bietet. Zum Beispiel:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dieser Code erstellt einen Schieberegler, der von 0 bis 100 geht und auf 0, 25, 50, 75 und 100 einrastet.
    HTML/Tutorials/Formulare/input/number – SELFHTML-Wiki


    https://refreshless.com/nouislider/

    Der in diesem Beitrag gezeigt Code funktioniert nicht - wenn du diesen trotzdem verwenden möchtest, musst du gültige Zeichen für “ und ” finden...
     
    #2 r23, 14. November 2023
    Zuletzt bearbeitet: 14. November 2023
  3. Dani_T

    Dani_T New Member

    Registriert seit:
    14. November 2023
    Beiträge:
    3
    Zustimmungen:
    0
    Hallo r23, vielen herzlichen Dank für deine Hilfe und die Codes, schätze ich sehr. Leider bin ich ein kompletter n00b. Könntest du mir vielleicht sagen welche dieser Varianten die einfachste ist und wo ich den Code genau eingeben muss?

    Bei Astra unter "Zusätzliches CSS", wäre das korrekt? Sorry für mein Unwissen...
     
  4. Dani_T

    Dani_T New Member

    Registriert seit:
    14. November 2023
    Beiträge:
    3
    Zustimmungen:
    0
    Ok habs hingebracht (ChatGPT sei dank). Einfach den Code im Code-Editor einfügen. Allerdings sieht der Range Slider zu basic aus. Was kann ich tun damit er moderner aussieht?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden