lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte

Wie kann ich die Darstellung eines Input Type Range Slider ändern?

<input type="range" min="0" max="100" value="50" id="slider">

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Hier ist ein Beispiel für das Styling eines Input type Range Element mit CSS.

<style>
    /* Füge diese CSS-Regeln zu deiner HTML-Datei hinzu oder in eine externe CSS-Datei ein */
    .slider {
        width: 300px; /* Breite des Sliders */
        -webkit-appearance: none; /* Entfernt das Standard-Styling von WebKit-Browsern */
        appearance: none;
        height: 10px; /* Höhe des Sliders */
        background: #ddd; /* Hintergrundfarbe des Sliders */
        outline: none; /* Entfernt den Fokus-Rahmen */
        opacity: 0.7; /* Transparenz des Sliders */
        -webkit-transition: .2s; /* Übergangseffekt für das Ändern des Wertes */
        transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Entfernt das Standard-Styling des Daumen-Griffes von WebKit-Browsern */
        appearance: none;
        width: 25px; /* Breite des Daumen-Griffes */
        height: 25px; /* Höhe des Daumen-Griffes */
        background: #4caf50; /* Farbe des Daumen-Griffes */
        cursor: pointer; /* Zeiger-Form beim Überfahren */
    }

    .slider::-moz-range-thumb {
        width: 25px; /* Breite des Daumen-Griffes für Firefox */
        height: 25px; /* Höhe des Daumen-Griffes für Firefox */
        background: #4caf50; /* Farbe des Daumen-Griffes für Firefox */
        cursor: pointer; /* Zeiger-Form beim Überfahren */
    }

</style>

<input type="range" min="0" max="100" value="50" class="slider" id="slider">
von (397 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

261 Kommentare

13 Nutzer