1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. IT
  6. »
  7. HTML Slider: So erstellst Du einen Schieberegler

HTML Slider: So erstellst Du einen Schieberegler

IT
HTML Slider

HTML Slider: So erstellst Du einen Schieberegler

Benötigst Du einen Schieberegler für Deine Website? Dann bist Du hier genau richtig! Wir zeigen Dir, wie Du ganz einfach einen HTML Slider erstellst!

Was den Regler ausmacht

Schieberegler findest Du in vielen verschiedenen Bereichen auf Deinem Computer. Sei es, um die Lautstärke, die Helligkeit oder die Farbe festzulegen. Mit einem Regler kannst Du ganz einfach kontrollieren, wie viel Du in relativem Wert von etwas haben möchtest. Der Regler kann dann ganz einfach nach links oder rechts geschoben werden, sodass ein bestimmter Bereich erzeugt wird.

Slider können entweder ein Symbol haben, das bewegt werden kann, oder aber zwei. Dann wird ein gewisser Bereich ausgewählt. Für herkömmliche Änderungen, wie die Anpassung der Lautstärke, ist aber der erste Fall wichtig. Besonders, wenn diese oft angepasst wird, ist ein Regler nützlich.

Slider-Bereiche:

  • billig bis teuer
  • dunkel bis hell
  • niedrig bis hoch
  • leise bis laut
  • einfach bis schwierig
  • wenig bis viel

Was es für einen Regler braucht

Möchtest Du einen Schieberegler erstellen, brauchst Du zunächst einen HTML-Code. So kreierst Du das Grundgerüst und legst die Range fest. Mithilfe von CSS kannst Du anschließend bestimmen, wie der Regler aussehen soll, um ihn ansprechender für den Nutzer zu machen. Mit JavaScript wird die Anzeige dynamisch gestaltet, beispielsweise lässt sich so der jeweils aktuelle Wert anzeigen.

HTML Slider erstellen

Zunächst ein Beispiel:

<div class="slider">
  <input type="range" min="1" max="100" step="1.0" value="50">
</div>

Lass uns das einmal aufbrechen:

  • div class=slider: Slider ist der Name, der den gesamten Code einschließt.
  • range: Hier stellst Du einen Zahlenwert ein, der nicht größer oder kleiner als ein bestimmter Wert sein darf.
  • min: Mindestens beträgt dieser Wert 0.
  • max: Höchstens beträgt dieser Wert 100.
  • value: Der Wert, der automatisch erscheint, wenn der Regler für den Nutzer auftaucht. Oft liegt er zunächst in der Mitte, Du kannst ihn aber auch für Deine Zwecke höher oder niedriger einstellen.
  • step: Zeigt die genaue Schrittweite des Werts an. In der Regel beträgt sie 1, wobei nur ganze Zahlen möglich sind.
  • list: Damit ist eine Werteliste gemeint, die momentan nicht in Browsern vorkommt.

Möglich ist es übrigens auch, den Regler auch vertikal einstellen:

Beispiel:

<input type="range" {
appearance: slider-vertical;
 }>

CSS hinzufügen

Nun hast Du einen klassischen Regler erstellt. Um diesen noch zu modifizieren und für den Nutzer ansprechender zu machen, kannst Du CSS nutzen. So wird das Erlebnis visuell aufgewertet.

Hinzufügen kannst Du zum Beispiel einen Hintergrund, die Position, Größe, Farbe und andere Komponenten.

.slider {
position: absolute
width: 100%
height: 70px
background: #A4A4A4 (grauer Hintergrund)
border-radius: 10px
outline: none (kein Umriss)
opacity: 0.7 (Deckkraft, wenn Du die Maus darüber bewegst)
 }

Das und viel mehr ist möglich. Mit JavaScript kannst Du dann zum Beispiel einstellen, dass der Nutzer schon bereits während des Schiebens den aktuellen Wert sieht.

HTML Slider im Überblick

Mit einem HMTL-Code ist es ganz einfach, einen Schieberegler zu erstellen. Er kann dafür gebraucht werden, um die Lautstärke, den Farbton oder auch die Helligkeit oder Preise zu regeln. Alles, was Du für den HTML Slider brauchst, sind die Angaben div class = „slider“, range, min, max, value, step und list. Dann kann es auch schon losgehen. Mit CSS und JavaScript kannst Du Dein Grundgerüst dann noch modifizieren.

FAQ zu HTML Slider

Was kann man bei einem Slider bzw. Regler alles einstellen?

Brauchst Du einen Regler für die Lautstärke, die Helligkeit oder andere Bereiche, kannst Du ganz einfach einen HTML Slider erstellen

Sieht der HTML Slider immer gleich aus?

Tatsächlich sieht so ein Slider unterschiedlich aus, je nach Browser und seinen Voreinstellungen. In Firefox und Safari sieht der Regler grau aus mit einem runden Symbol. Internet Explorer und Edge zeigt den Regler eckig an, mit einem schwarzen Symbol und einer blauen Range-Farbe.

Wie kann ich meinen HTML Slider weiterhin anpassen?

Ganz einfach geht das mit CSS, anschließend kannst Du dann noch JavaScript verwenden.

Ähnliche Beiträge

Die mobile Version verlassen