Bootstrap - Slider Demo: Panduan Lengkap untuk Pemula
Hai teman-teman pemula pengembang web! Hari ini, kita akan mengemban sebuah perjalanan menarik ke dunia slider Bootstrap. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengarahkan Anda melalui petualangan ini langkah demi langkah. Jadi, ambil minumannya yang favorit, nyamanlah, dan mari kita masuk ke dalam!
Apa Itu Bootstrap Slider?
Sebelum kita mulai mengoding, mari kita pahami apa yang kita hadapi. Sebuah slider Bootstrap adalah komponen antarmuka pengguna yang memungkinkan pengguna untuk memilih nilai dari suatu rentang dengan menggeser pegangan sepanjang batang. Itu seperti versi digital dari slider volume yang Anda lihat di radio lama – lumayan menarik, kan?
Mengapa Menggunakan Bootstrap Sliders?
Slider sangat cocok untuk:
- Memilih nilai numerik dalam suatu rentang
- Mengatur pengaturan seperti volume atau kecerahan
- Memfilter data berdasarkan rentang (misalnya rentang harga di situs belanja)
Sekarang kita tahu apa itu dan mengapa mereka berguna, mari kita mulai dengan kode!
Menyiapkan Lingkungan Bootstrap Anda
Pertama-tama, kita perlu menyiapkan lingkungan Bootstrap kita. Jangan khawatir; itu lebih mudah daripada mengatur ponsel baru!
Langkah 1: Sertakan Bootstrap CSS dan JS
Tambahkan baris berikut ke bagian <head> file HTML Anda:
<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>Baris ini seperti mengundang Bootstrap ke pesta coding Anda. Mereka membawa semua gaya dan fungsi yang keren yang kita butuhkan.
Membuat Bootstrap Slider Pertama Anda
Sekarang, mari kita buat slider dasar. Itu sama mudahnya membuat roti – well, mungkin sedikit lebih sulit, tapi Anda akan bisa menguasainya!
Langkah 2: Struktur HTML
Tambahkan kode ini ke bagian body HTML Anda:
<div class="container mt-5">
<h2>Slider Bootstrap Pertamaku</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>Nilai: <span id="rangeValue"></span></p>
</div>mari kitauraikan ini:
-
<div class="container mt-5">: Ini membuat sebuah kontainer dengan margin atas sedikit. -
<input type="range">: Ini adalah input slider kita. -
class="form-range": Kelas Bootstrap ini menggayakan input kita sebagai slider. -
min="0" max="100" step="1": Ini menentukan nilai minimum, maksimum, dan langkah. -
<p>Nilai: <span id="rangeValue"></span></p>: Ini akan menampilkan nilai yang dipilih.
Langkah 3: Keajaiban JavaScript
Sekarang, mari kita tambahkan beberapa JavaScript untuk membuat slider kita interaktif:
<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // Menampilkan nilai slider default
// Memperbarui nilai slider saat ini (setiap kali Anda geser pegangan slider)
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>Skrip ini melakukan dua hal:
- Menampilkan nilai awal slider.
- Memperbarui nilai yang ditampilkan saat Anda menggeser slider.
Menyesuaikan Slider Anda
Sekarang kita memiliki slider dasar, mari kita perpadatnya sedikit. Waktu untuk memakai topi desainer kita!
Langkah 4: Menambahkan Gaya
Mari kita tambahkan beberapa CSS khusus untuk membuat slider kita tampak menarik:
<style>
.custom-range {
width: 300px;
}
.custom-range::-webkit-slider-thumb {
background: #007bff;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
</style>Tambahkan ini ke bagian <head> file HTML Anda. Itu mengubah lebar slider dan memberikan warna biru ke pegangan (bagian yang Anda geser).
Langkah 5: Membuat Slider Ganda
Sekarang, mari kita buat sesuatu yang lebih maju – slider ganda untuk memilih rentang:
<div class="container mt-5">
<h2>Pemilih Rentang Harga</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>Harga Minimum: $<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>Harga Maksimum: $<span id="maxValue"></span></p>
</div>
</div>
</div>Dan JavaScript yang sesuai:
<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>Ini menciptakan dua slider yang bekerja bersama untuk memilih rentang harga. Skrip ini memastikan bahwa harga minimum tidak pernah melebihi harga maksimum dan sebaliknya.
Kesimpulan
Selamat! Anda telah membuat slider Bootstrap pertama Anda. Dari slider tunggal sederhana ke pemilih rentang ganda, Anda telah meliputi banyak hal. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba gaya dan fungsi yang berbeda.
Berikut adalah ringkasan apa yang kita pelajari:
| Konsep | Deskripsi |
|---|---|
| Setup Bootstrap | Menyertakan Bootstrap CSS dan JS dalam HTML Anda |
| Slider Dasar | Membuat input range sederhana yang diberikan gaya dengan Bootstrap |
| Interaksi JavaScript | Menggunakan JavaScript untuk menampilkan dan memperbarui nilai slider |
| Gaya Khusus | Menggunakan CSS khusus untuk mengubah penampilan slider |
| Slider Ganda | Membuat pemilih rentang harga dengan dua slider yang terhubung |
Tetap geser Anda menuju kesuksesan, dan selamat coding!
Credits: Image by storyset