Bootstrap - Slider Demo: Panduan Lengkap untuk Pemula

Hai teman-teman pengembang web yang ambisius! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia slider Bootstrap. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu Anda dalam petualangan ini langkah demi langkah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Bootstrap - Slider Demo

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 sebuah rentang dengan menggeser pegangan di sepanjang batang. Itu seperti versi digital dari slider volume yang Anda lihat di radio lama – sungguh menarik, kan?

Mengapa Menggunakan Bootstrap Sliders?

Slider sangat bagus untuk:

Memilih nilai numerik dalam sebuah 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 beberapa kode!

Menyiapkan Lingkungan Bootstrap

Pertama-tama, kita perlu menyiapkan lingkungan Bootstrap kita. Jangan khawatir; itu lebih mudah daripada mengatur ponsel baru!

Langkah 1: Termasukkan 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 pengodingan Anda. Mereka membawa semua gaya dan fungsi yang keren yang kita butuhkan.

Membuat Slider Bootstrap Pertama Anda

Sekarang, mari kita buat slider dasar. Itu seperti membuat roti – well, mungkin sedikit lebih rumit, tapi Anda akan mengetahui caranya!

Langkah 2: Struktur HTML

Tambahkan kode ini ke body HTML Anda:

<div class="container mt-5">
<h2>Slider Bootstrap Pertama Saya</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 wadah dengan margin atas.
<input type="range">: Ini adalah input slider kita.
class="form-range": Kelas Bootstrap ini menggaya input kita menjadi 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 sedikit 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:

Itu menampilkan nilai awal slider.
Itu memperbarui nilai yang ditampilkan saat Anda menggeser slider.

Menyesuaikan Slider Anda

Sekarang kita memiliki slider dasar, mari kita perbaikinya sedikit. Waktunya kita pakai topi desainer!

Langkah 4: Menambahkan Gaya

Let's tambahkan sedikit CSS custom 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 warna pegangan (bagian yang Anda geser) menjadi biru.

Langkah 5: Membuat Slider Ganda

Sekarang, mari kita buat sesuatu yang sedikit lebih tingkat tinggi – 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 Min: $<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 Max: $<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 membuat 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 harga ganda, Anda telah menempuh banyak hal. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba gaya dan fungsi yang berbeda.

Berikut adalah ringkasan apa yang kita pelajari:

Konsep	Deskripsi
Setup Bootstrap	Mentermasukkan Bootstrap CSS dan JS ke HTML
Slider Dasar	Membuat input range sederhana yang di gayakan dengan Bootstrap
Interaksi JavaScript	Menggunakan JavaScript untuk menampilkan dan memperbarui nilai slider
Gaya Custom	Menggunakan CSS custom untuk mengubah penampilan slider
Slider Ganda	Membuat pemilih rentang harga dengan dua slider yang terhubung

Tetap geser dan sukses, dan kodingsenang!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Demо Blog

Tutorial Seterusnya:

Bootstrap - Demo Carousell