Mempelajari Range dan Cara Menampilkan Nilainya

Jika dipelajari dengan dalam, ternyata HTML memiliki banyak tipe inputan. Salah satunya adalah range. Ada yang sudah pernah menggunakannya? Jika belum, kali ini kita akan mencoba untuk mempelajarinya. Sebenarnya, apa dan siapakah range ini?

Coba lihat dan klik icon volume yang ada di taksbar laptopmu. Saat dinaikkan ke atas, akan muncul angka yang menampilkan nilai dari range tersebut. Semakin atas, semakin besar nilainya. Semakin kecil maka semakin kecil pula nilainya.

Kurang lebih seperti itulah yang akan kita pelajari hari ini.

Bagaimana cara penggunaannya? Ketik script berikut ini :

<input type="range" min="0" max="100" value="50"  />

Script di atas menunjukkan nilai minimumnya 0 dan maksimalnya 100. Save dan lihat hasilnya :

Lalu, bagaimana cara kita mengetahui nilainya?

Karena contoh di atas adalah default dari range, maka kita harus berkreasi sedikit. Sekarang kita coba cek dengan javascript apakah yang di tampilkan memang sudah dari 0-100. Ketik script berikut :

<input type="range" min="0" max="100" value="50" id="o" onClick="hey()" />
<script type="text/javascript">
    function hey() {
        var nilai = document.getElementById('o').value;
        alert(nilai);
    }
</script>

Save dan lihat hasilnya:

Setiap digeser, akan muncul alert yang menunjukkan nilai dari range tersebut. Namun, sangat merepotkan ya? Jika harus muncul alert lalu klik ok. Begitu seterusnya. Cara mengatasinya bisa dengan javascript lagi. Ketik script berikut :

<label for="vol">Volume</label>
<input type="range" min="0" max="100" value="50" id="vol" oninput="nilai(value)">
<output for="vol" id="volume">50</output>

<script>
    function nilai(vol) {
        document.querySelector('#volume').value = vol;
    }
</script>

Save dan lihat hasilnya! Sudah berhasil kan?

50

Semoga bermanfaat ya :)

14 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat