Wie erstelle ich: Bereichsschieberegler

Lerne, wie du benutzerdefinierte Bereichsschieberegler mit CSS und JavaScript erstellst.

Standard:

Quadrat:

Punkt:

Bild:

Wert:

Try it yourself

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 */
{}

Try it yourself

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;
{}

Try it yourself

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;
{}

Try it yourself

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;
{}

Try it yourself