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