Selamat Datang

Membuat slide control dengan Jquery

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

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.

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

Salam Web Design Indonesia…





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

One thought on “Membuat slide control dengan Jquery

  1. lennon says:

    itu cara nambah jumlah angkanya gimana? misalkan mau di edit dari 10 jadi 100 tapi tanpa harus merubah ukuran slidenya.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development