Membuat Slider Vertikal dengan jquery

Contoh Kasus:

Saya ingin menaikkan nilai dari menurunkan nilai menggunakan slider vertikal seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana membuatnya … ?

Jawaban:

Kita bisa menggunakan fasilitas dari jqueryui.com dan cara pembuatannya ikuti langkah dibawah ini:

Download dan Extract

Download jqueryui dari jqueryui.com

Lalu extractlah file hasil downloadan disembarang tempat.

Pengkopian File dan Folder

File-file JavaScript yang dibutuhkan untuk membuat Vertikal Slider:

• jquery-1.5.1.js
• jquery.ui.core.js
• jquery.ui.mouse.js
• jquery.ui.slider.js
• jquery.ui.widget.js

Ambillah file-file tersebut dari hasil extrakan dan masukkan ke folder js.

File-file CSS yang diperlukan untuk membuat vertikal slider, yaitu:

• jquery.ui.all.css
• jquery.ui.base.css
• jquery.ui.theme.css
• jquery.ui.slider.css

Ambillah file-file tersebut dari file hasil extrakan yaitu dalam folder development-bundle/themes/ui-lightness, lalu masukkan ke folder css.

Ambil juga folder images yang terdapat dalam folder development-bundle/themes/ui-lightness dan masukkan juga ke folder css.

Hasil:

Membuat Kode HTML

Buatlah satu file HTML bernama slider.html dengan isi seperti dibawah ini:

Keterangan:

• $(“slider-vertical”).slider(), kode ini digunakan untuk memberikan metode slider() ke elemen HTML yang mempunyai id=”slider-vertikal” yaitu elemen <div id=”slider-vertical” style=”height:200px;”>
• orientation:”vertical”, kode ini digunakan untuk membuat slider vertikal.
• range:”min”, ini berarti warna slider dimulai dari yang terkecil ke yang terbesar.
• min:0, kode ini berarti nilai minimum dari slider adalah 0.
• max:100, kode ini berarti nilai maximum dari slider adalah 100.
• value:60. kode ini digunakan untuk menentukan nilai default dari slider.
• slide: function( event, ui ) , kode ini akan dieksekusi setiap kali mouse menggerakkan slider.
• $( “#amount” ).val( ui.value ), kode ini digunakan untuk memberikan nilai dari slider ke elemen HTML yang mempunyai id=”amount” yaitu elemen <input type=”text” id=”amount” style=”border:0; color:#f6931f; font-weight:bold;” />

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.