Input Type Range Style

Question

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

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

Answer 1

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">