Bootstrap - Slider-Demo: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Bootstrap-Slider. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie Schritt für Schritt durch dieses Abenteuer zu führen. Also holen Sie sich Ihr lieblingsGetränk, machen Sie sich bequem und tauchen wir ein!

Bootstrap - Slider Demo

Was ist ein Bootstrap Slider?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, womit wir es zu tun haben. Ein Bootstrap Slider ist ein Benutzeroberflächenelement, das es Benutzern ermöglicht, einen Wert aus einem Bereich durch Verschieben eines Griffs entlang einer Leiste auszuwählen. Es ist wie eine digitale Version dieser Lautstärkeregler, die Sie auf alten Radios sehen – ziemlich cool, oder?

Warum Bootstrap Sliders verwenden?

Slider sind großartig für:

Auswahl numerischer Werte innerhalb eines Bereichs
Einstellungen wie Lautstärke oder Helligkeit anpassen
Daten basierend auf einem Bereich filtern (denken Sie an Preisbereiche auf Einkaufsseiten)

Nun, da wir wissen, was sie sind und warum sie nützlich sind, lassen Sie uns mit ein wenig Code die Hände schmutzig machen!

Einrichtung Ihrer Bootstrap-Umgebung

Zuerstonce, müssen wir unsere Bootstrap-Umgebung einrichten. Keine Sorge; es ist einfacher als die Einrichtung eines neuen Handys!

Schritt 1: Bootstrap CSS und JS einbinden

Fügen Sie die folgenden Zeilen in den <head>-Bereich Ihrer HTML-Datei ein:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Diese Zeilen sind wie die Einladung von Bootstrap zu Ihrer Coding-Party. Sie bringen alle coolen Stile und Funktionen mit, die wir brauchen.

Erstellung Ihres ersten Bootstrap Slider

Nun erstellen wir einen grundlegenden Slider. Es ist so einfach wie Toast zu machen – gut, vielleicht ein bisschen komplizierter, aber Sie werden den Dreh rauskriegen!

Schritt 2: HTML-Struktur

Fügen Sie diesen Code in den HTML-Body ein:

<div class="container mt-5">
<h2>Mein erster Bootstrap Slider</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>Wert: <span id="rangeValue"></span></p>
</div>

Lassen Sie uns das auseinandernehmen:

<div class="container mt-5">: Dies erstellt einen Behälter mit etwas oberem Abstand.
<input type="range">: Dies ist unser Slider-Eingabefeld.
class="form-range": Diese Bootstrap-Klasse stylt unsere Eingabe als Slider.
min="0" max="100" step="1": Diese setzen den Mindest-, Maximal- und Schrittwert.
<p>Wert: <span id="rangeValue"></span></p>: Dies wird unseren ausgewählten Wert anzeigen.

Schritt 3: JavaScript Magie

Nun fügen wir etwas JavaScript hinzu, um unseren Slider interaktiv zu machen:

<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // Standard-Slider-Wert anzeigen

// Aktualisiere den aktuellen Slider-Wert (jedes Mal, wenn Sie den Slider-Griff ziehen)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

Dieses Skript macht zwei Dinge:

Es zeigt den initialen Wert des Sliders an.
Es aktualisiert den angezeigten Wert, wenn Sie den Slider bewegen.

Anpassung Ihres Sliders

Nun haben wir einen grundlegenden Slider, lasSEN wir ihn ein bisschen aufpeppen. Es ist Zeit, unsere Designerhüte aufzusetzen!

Schritt 4: Hinzufügen von Stil

Fügen Sie etwas benutzerdefiniertes CSS hinzu, um unseren Slider hervorzuheben:

<style>
.custom-range {
width: 300px;
}
.custom-range::-webkit-slider-thumb {
background: #007bff;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
</style>

Fügen Sie dies in den <head>-Bereich Ihrer HTML-Datei ein. Es ändert die Breite des Sliders und färbt die Taste (den Teil, den Sie ziehen) blau.

Schritt 5: Erstellung eines的双头Slider

Nun erstellen wir etwas fortgeschritteneres – einen 双头Slider zur Auswahl eines Bereichs:

<div class="container mt-5">
<h2>Preisbereich-Auswahl</h2>
<div class="row">
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="minPrice">
<p>Mindestpreis: $<span id="minValue"></span></p>
</div>
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="maxPrice">
<p>Maximalpreis: $<span id="maxValue"></span></p>
</div>
</div>
</div>

Und der entsprechende JavaScript-Code:

<script>
const minSlider = document.getElementById('minPrice');
const maxSlider = document.getElementById('maxPrice');
const minOutput = document.getElementById('minValue');
const maxOutput = document.getElementById('maxValue');

minOutput.innerHTML = minSlider.value;
maxOutput.innerHTML = maxSlider.value;

minSlider.oninput = function() {
minOutput.innerHTML = this.value;
if (parseInt(this.value) > parseInt(maxSlider.value)) {
maxSlider.value = this.value;
maxOutput.innerHTML = this.value;
}
}

maxSlider.oninput = function() {
maxOutput.innerHTML = this.value;
if (parseInt(this.value) < parseInt(minSlider.value)) {
minSlider.value = this.value;
minOutput.innerHTML = this.value;
}
}
</script>

Dies erstellt zwei Slider, die zusammenarbeiten, um einen Preisbereich auszuwählen. Das Skript stellt sicher, dass der Mindestpreis nie den Maximalpreis übersteigt und umgekehrt.

Fazit

Glückwunsch! Sie haben gerade Ihre ersten Bootstrap-Slider erstellt. Von einem einfachen Single-Slider bis zu einem komplexeren 双头Bereichsauswahler, Sie haben viel Boden gewonnen. Denken Sie daran, Übung macht den Meister, also haben Sie keine Angst, mit verschiedenen Stilen und Funktionen zu experimentieren.

Hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

Konzept	Beschreibung
Bootstrap-Einrichtung	Einfügen von Bootstrap CSS und JS in Ihre HTML
Grundlegender Slider	Erstellung eines einfachen Bereichschiebereglers mit Bootstrap
JavaScript-Interaktion	Verwenden von JavaScript, um Slider-Werte anzuzeigen und zu aktualisieren
Benutzerdefinierte Styling	Anwendung von benutzerdefiniertem CSS, um das Erscheinungsbild des Sliders zu ändern
双头Slider	Erstellung eines Bereichsauswahlers mit zwei miteinander verbundenen Slidern

Machen Sie weiter mit dem Sliden auf Ihrem Weg zum Erfolg und viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Blog-Demo

Nächstes Tutorial:

Bootstrap - Karussell-Demo