Wie erstelle ich: Bereichsschieberegler
- Previous page Skill bar
- Next page Color picker
Lerne, wie du benutzerdefinierte Bereichsschieberegler mit CSS und JavaScript erstellst.
Standard:
Quadrat:
Punkt:
Bild:
Wert:Erstelle einen Bereichsschieberegler
Erster Schritt - HTML hinzufügen:
<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div>
Zweiter Schritt - CSS hinzufügen:
.slidecontainer { width: 100%; /* Breite des externen Containers */ {} /* Der Schieberegler selbst */ .slider { -webkit-appearance: none; /* Standard CSS-Styles überdecken */ appearance: none; width: 100%; /* Volle Breite */ height: 25px; /* Angabene Höhe */ background: #d3d3d3; /* Grauer Hintergrund */ outline: none; /* Kontur entfernen */ opacity: 0.7; /* Transparenz einstellen (verwendet für den Mausüberfahreffekt) */ -webkit-transition: .2s; /* Übergangseffekt von 0.2 Sekunden */ transition: opacity .2s; {} /* Mausüberfahreffekt */ .slider:hover { opacity: 1; /* Vollständig sichtbar bei Mausüberfahren */ {} /* Schiebereglergriff (verwendet -webkit- (Chrome, Opera, Safari, Edge) und -moz- (Firefox), um das Standardaussehen zu überdecken) */ .slider::-webkit-slider-thumb { -webkit-appearance: none; /* Überdeckt das Standardaussehen */ appearance: none; width: 25px; /* Setzen Sie eine spezifische Breite des Schiebereglergreifes */ height: 25px; /* Höhe des Schiebereglergreifes */ background: #04AA6D; /* Grün Hintergrund */ cursor: pointer; /* Cursor bei der Mausüberlagerung */ {} .slider::-moz-range-thumb { width: 25px; /* Setzen Sie eine spezifische Breite des Schiebereglergreifes */ height: 25px; /* Höhe des Schiebereglergreifes */ background: #04AA6D; /* Grün Hintergrund */ cursor: pointer; /* Cursor bei der Mausüberlagerung */ {}
Schritt 3 - Fügen Sie JavaScript hinzu:
Erstellen Sie einen dynamischen Bereichsschieberegler mit JavaScript, um den aktuellen Wert anzuzeigen:
var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; // Zeige den Standardwert des Schiebereglers an // Aktualisieren Sie den aktuellen Schiebereglerwert (jedes Mal, wenn Sie den Schiebereglergriff ziehen) slider.oninput = function() { output.innerHTML = this.value; {}
Runder Schieberegler
Um einen runden Schiebereglergriff zu erstellen, verwenden Sie border-radius
Eigenschaft.
Hinweis:Wenn Sie eine ungleiche Höhe wünschen (im Beispiel 15 Pixel und 25 Pixel), setzen Sie die Höhe des Schiebereglers auf einen anderen Wert als den des Schiebereglers:
Beispiel
.slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; {} .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #04AA6D; cursor: pointer; {} .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #04AA6D; cursor: pointer; {}
Schieberegler-Symbol/Bild
Um einen Schiebereglergriff mit Symbol/Bild zu erstellen, verwenden Sie background
Eigenschaft und fügen Sie den Bild-URL ein:
Beispiel
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; {} .slider::-moz-range-thumb { width: 23px; height: 25px; border: 0; background: url('contrasticon.png'); cursor: pointer; {}
- Previous page Skill bar
- Next page Color picker