Bootstrap - Rentang: Panduan Komprehensif untuk Pemula

Hai teman-teman, para pengembang web yang bersemangat! Hari ini, kita akan melihat sebuah topik yang pasti akan merenggangkan 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 minumannya yang favorit, duduk nyaman, dan mari kita mulai!

Apa Itu Bootstrap Range?

Sebelum kita masuk ke dalam 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 pengaduan 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 menciptakan penggeser rentang dasar. Elemen <label> menyediakan deskripsi untuk input rentang kita, sedangkan elemen <input> dengan type="range" menciptakan penggeser yang sebenarnya. class="form-range" menerapkan gaya khusus Bootstrap untuk membuatnya terlihat modern dan ramping.

Ketika Anda menjalankan kode ini, Anda akan melihat penggeser horizontal yang pengguna dapat geser ke kiri atau 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 mirip dengan yang dasar kita, tetapi kita menambahkan atribut disabled ke elemen <input>. Ini mengabu-abu penggeser dan mencegah interaksi pengguna - sempurna untuk saat Anda ingin menunjukkan nilai tapi tidak mengizinkan perubahan.

Nilai Minimum dan Maksimum

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

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

Dalam contoh ini, kita mengatur 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 tepat atas rentang nilai.

Langkah

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

<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, kita 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 menciptakan pemilih ukuran pizza. mari kita rincikan 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 termasuk 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 untuk memilih ukuran pizza, dengan ukuran yang dipilih memperbarui secara instan di bawah penggeser. Itu seperti berada di pizzeria digital!

Kesimpulan

Dan begitulah, teman-teman! Kita telah melintasi dasar-dasar Bootstrap Range inputs. Dari penggeser sederhana hingga contoh interaktif yang kompleks, Anda sekarang memiliki alat untuk menambahkan keajaiban penggeser ke proyek web Anda.

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

Selamat coding, dan semoga rentang Anda selalu berjalan mulus!

Credits: Image by storyset