Bootstrap - Rentang: Panduan Komprehensif untuk Pemula

Hai teman-teman, para pengembang web yang sedang mencari ilmu! Hari ini, kita akan melompat ke sebuah topik yang pasti akan merayap ke hati Anda - Bootstrap Range input. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk memandu Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, duduklah nyaman, dan mari kita mulai!

Apa Itu Bootstrap Range?

Sebelum kita masuk ke kode, mari kita pahami apa yang kita hadapi. Bootstrap Range adalah versi yang disesuaikan dari elemen HTML5 <input type="range">. Ini memungkinkan pengguna untuk memilih nilai dari rentang yang ditentukan dengan menggeser kontrol di sepanjang batang. Itu seperti versi digital dari penggeser yang Anda lihat di papan mixing suara - lumayan keren, kan?

Contoh Dasar

Mari kita mulai dengan contoh sederhana untuk merasakan air:

<label for="customRange1" class="form-label">Contoh rentang</label>
<input type="range" class="form-range" id="customRange1">

Kode ini membuat penggeser rentang dasar. Elemen <label> menyediakan deskripsi untuk input rentang kita, sedangkan elemen <input> dengan type="range" membuat penggeser yang sebenarnya. Kelas class="form-range" menerapkan gaya khusus Bootstrap untuk membuatnya terlihat ramping dan modern.

Ketika Anda menjalankan kode ini, Anda akan melihat penggeser horizontal yang pengguna dapat geser ke kiri atau ke kanan untuk memilih nilai. Secara default, rentang ini berjalan dari 0 hingga 100.

Rentang Nonaktif

kadang-kadang, Anda mungkin ingin menampilkan penggeser rentang tetapi mencegah pengguna untuk berinteraksi dengannya. Itu di mana atribut disabled berguna:

<label for="disabledRange" class="form-label">Rentang nonaktif</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Contoh ini hampir sama seperti contoh dasarnya, tetapi kami menambahkan atribut disabled ke elemen <input>. Ini mengabu-abukan penggeser dan mencegah interaksi pengguna - sempurna untuk saat Anda ingin menampilkan nilai tetapi tidak mengijinkan perubahan.

Nilai Min dan Max

Apa bila kita ingin penggeser kita mewakili rentang nilai tertentu? Itu di mana atribut min dan max memainkan peran:

<label for="customRange2" class="form-label">Contoh rentang</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Dalam contoh ini, kami menetapkan min="0" dan max="5". Sekarang, bukan rentang default 0-100, penggeser kita akan berjalan dari 0 hingga 5. Ini bagus untuk saat Anda memerlukan kontrol yang lebih presis atas rentang nilai.

Langkah

kadang-kadang, Anda mungkin ingin penggeser Anda bergerak dalam increment tertentu. Itu di mana atribut step memainkan peran:

<label for="customRange3" class="form-label">Contoh rentang</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Di sini, kami menambahkan step="0.5" ke contoh sebelumnya. Ini berarti penggeser akan bergerak dalam increment 0.5. Jadi, nilai yang mungkin adalah 0, 0.5, 1, 1.5, dan seterusnya hingga 5.

Menggabungkan Semua: Contoh Praktis

Sekarang kita telah melihat dasar-dasar, mari kita buat contoh yang lebih kompleks yang menggabungkan semua yang kita pelajari:

<div class="container mt-5">
<h2>Pemilih Ukuran Pizza</h2>
<label for="pizzaSize" class="form-label">Pilih ukuran pizza Anda (dalam inci)</label>
<input type="range" class="form-range" min="8" max="18" step="2" id="pizzaSize">
<p>Ukuran yang dipilih: <span id="sizeDisplay">13</span> inci</p>
</div>

<script>
const pizzaSize = document.getElementById('pizzaSize');
const sizeDisplay = document.getElementById('sizeDisplay');

pizzaSize.addEventListener('input', function() {
sizeDisplay.textContent = this.value;
});
</script>

Dalam contoh ini, kita telah membuat pemilih ukuran pizza. Mari kitauraikan ini:

1. Kita menggunakan input rentang dengan min="8", max="18", dan step="2". Ini memungkinkan pengguna untuk memilih ukuran pizza genap dari 8 hingga 18 inci.
2. Kita menambahkan elemen <p> untuk menampilkan ukuran yang dipilih.
3. Kita menyertakan sedikit JavaScript untuk memperbarui ukuran yang ditampilkan secara real-time saat pengguna menggeser penggeser.

Ketika Anda menjalankan kode ini, Anda akan melihat penggeser yang memungkinkan pengguna memilih ukuran pizza, dengan ukuran yang dipilih memperbarui secara instan di bawah penggeser. Itu seperti berada di pizzeria digital!

Kesimpulan

Dan itu adalah, teman-teman! Kita telah meluncur melalui dasar-dasar input rentang Bootstrap. Dari penggeser sederhana hingga contoh interaktif yang kompleks, Anda sekarang memiliki alat untuk menambahkan magis penggeser ke proyek web Anda.

Ingat, latihan membuat sempurna. Cobalah membuat input rentang Anda sendiri, eksperimen dengan nilai min, max, dan langkah, dan lihat apa yang Anda bisa buat. Mungkin pengaturan volume untuk pemutar musik? Atau pengaturan kesulitan untuk permainan? Kesempatan tak terbatas!

Happy coding, dan may your ranges always slide smoothly!

Credits: Image by storyset