Dengan HTML5 kita dengan mudah membuat sebuah slider control. Untuk membuatnya kita hanya perlu membuat coding satu baris saja seperti contoh berikut ini:
Kapasitas: 10<input type=”range” min=”10″ max=”1000″ step=”10″ value=”200″ />1000 MB<br/>
Coding lengkapnya adalah:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Slider dengan HTML5</title>
<meta name=”” content=””>
</head>
<body>
Kapasitas: 10<input type=”range” min=”10″ max=”1000″ step=”10″ value=”200″ />1000 MB<br/>
</body>
</html>
Hasilnya dapat dilihat pada http://aris.proweb.asia/slider_html5.html dengan tampilan seperti berikut ini
Pada saat artikel ditulis coding ini berjalan dengan baik di browser Google Chrome dan Opera terbaru. Untuk browser yang lain belum bisa berjalan seperti yang diharapkan. Dengan kemudahan membuat slider pada HTML5 ini maka pembuatan coding akan lebih sederhana dan mempercepat waktu development/pengembangan.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.