Tutorial Web Design

Pada tutorial kali ini kita akan mencoba membuat Slide Control dengan Jquery, Apa sih slide control itu? Pada dasarnya kita akan mengontrol isi dari sebuah input text hanya dengan menyeret pengontrol nya saja.

Jquery Slide Control

Ini bagus jika anda ingin menggunakannya untuk mempercantik form ketika terdapat field untuk mengisi berat badan misal nya, atau tinggi badan, atau jika di sebuah website e-commerce ini bisa digunakan untuk mempercantik field jumlah barang yang ingin dibeli, atau jika ada sedang membuat website musik, nah ini bisa digunakan untuk mengatur volume dll. Ya kira-kira penggunaanya seperti itu lah.

Oke kita mulai

Pertama siapkan sebuah folder js, berisi file berikut:

• jquery.js
• jquery.slideControl.min.js

Plugin Jquery Slide Control bisa didapat disini.
Selanjutnya siapkan folder css berisi file berikut:

• slideControl.css
• style.css

Oke sekarang buat sebuah file bernama index.html, diletakan diluar folder js, dan css

Isinya kira-kira sebagai berikut

<section>
			<ul>
				<li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" /></li>
				<li><label>Safety: </label><input type="text" value="4.0" class="slideControl" /></li>
				<li><label>Information: </label><input type="text" value="9.0" class="slideControl" /></li>
			</ul>
		</section>

Sedangkan isi file css/style.css adalah sebagai berikut:

section{width:700px;margin:20px auto;}
section li {margin:10px 0;}
section ul {list-style-type:none;}
section ul.options {margin-left:20px; margin-bottom:20px; list-style-type:disc;}
section ul.options li {margin:5px 0; font-size:0.85em;}
section input.slideControl {width:40px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
section label {font-size:1em; font-weight:bold; float:left; width:145px; margin-top:10px;}

Hasilanya adalah seperti berikut ini

Hasilnya adalah sebagai berikut ini.

DEMO DOWNLOAD

Sekian tutorial kali ini, semoga ini bisa membantu mempercantik website yang sedang anda buat.

Salam Web Design Indonesia…