#60 cara membuat rentang input angka pada html
pada tutorial ini kita akan belajar cara membuat rentang input angka pada html.
Deskripsi
input dengan type range memungkinkan pengguna menentukan nilai numerik yang tidak boleh kurang dari nilai yang diberikan dan tidak lebih dari nilai yang sudah ditentukan.
nilai yang dimasukan tidak dianggap penting karena pengguna bisa memasukan sesuai selera.
tampilan input ini dipresentasikan dengan menggunakan tombol penggeser seperti kontrol slider.
input type range bisa digunakan dalam input volume audio atau jarak harga dalam filter produk yang sudah ditentukan.
<!DOCTYPE html>
<html>
<head>
<title> input range pada html </title>
</head>
<body>
<input type="range" min="" max="" step="" />
</body>
</html>Code language: HTML, XML (xml)
jika browser pengguna tidak mendukung type range, maka input akan kembali dan memperlakukannya sebagai input teks.
elemen input type=”range” tidak didukung di internet Explorer 9 dan versi sebelumnya.
Atribut pada input range
pada dasarnya input rentang angka memiliki beberapa atribut yaitu:
| Atribut | | Detail |
| value | : | nilai default range yang akan ditampilkan pertama kali |
| min | : | Nilai terendah dalam rentang nilai yang diizinkan, nilai defaultnya 0 |
| max | : | Nilai terbesar dalam rentang nilai yang diizinkan, nilai defaultnya 100 |
| step | : | nilai kelipatan setiap kenaikan atau penurunan, nilai defaultnya 1 |
kita bisa mengubah batasan minimal atau maksimal atau kelipatannya bahkan nilai default range.
min=”-10″ juga bisa, max=”2000″ juga bisa , mungkin dengan kelipatan step=”0.01″ bisa juga.
contoh kita akan membuat input range volume dengan value default 14, minimal nilai 0 dan maksimal tidak boleh lebih dari 16 dan kelipatannya menggunakan atribut step dengan nilai 2.
<!DOCTYPE html>
<html>
<head>
<title> input range volume pada html </title>
</head>
<body>
<input type="range" value="14" min="0" max="16" step="2" />
</body>
</html>Code language: HTML, XML (xml)
dengan nilai default 14 tombol akan lebih ke samping kanan mendekati maksimal batas input.
apabila kita mencoba menggeser kekiri atau kekanan akan pindah dengan kelipatan 2.
jika kita ingin membuat step berapapun gunakan nilai step=”any”, coba klik tombol coba script untuk mencobanya.
<!DOCTYPE html>
<html>
<head>
<title> mengetahui input range pada html </title>
</head>
<body>
<input type="range" onchange="range()" id="range" value="14" min="0" max="16" step="any" />
<script>
function range() {
var nilaiRange = document.getElementById('range').value;
alert(nilaiRange);
}
</script>
</body>
</html>Code language: HTML, XML (xml)
apabila kita menggeser tombol range maka akan muncul nilai berapapun nilainya misalnya:
Baca juga : mengenal atribut input pada html
meskipun dengan input type number memungkinkan pengguna memasukkan angka dengan batasan opsional untuk memaksa nilai pengguna berada diantara nilai minimum dan maksimum, pengguna harus memasukan nilai tertentu.
Dengan membuat input range number pada html memungkinkan kita untuk meminta pengguna memasukan nilai yang tidak dipedulikan atau diketahui pengguna nilai spesifik yang dipilih.
contoh penggunaan input rentang
diatas kita sudah mengetahui contoh volume namun ada beberapa contoh lain dimana input rentang biasa digunakan.
- mengontrol keseimbangan atau kontrol filter.
- kontrol warna seperti warna pada tv, transparansi, kecerahan dll.
- pada saat maen game ingin mengatur kesulitan, jarak pandang, ukuran perbesar atau memperkecil peta dan lain sebagainya.
- panjang kata sandi untuk kata sandi yang dibuat oleh pengelola kata sandi.
- mengatur ukuran huruf, skala, noise pada photoshop dll.
apabila pengguna lebih tertarik pada persentase jarak antara nilai minimum dan maksimum daripada angka yang pasti, input range adalah cara yang bagus untuk diterapkan.
Pencarian di thohirdev:
- input range html
- mengatur rentang angka html
- type range html
- membatasi inputan pada range