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:

<html>
<head>
<link rel=”stylesheet” href=”css/jquery.ui.all.css”>
<script src=”js/jquery-1.5.1.js”></script><script src=”js/jquery.ui.core.js”></script>
<script src=”js/jquery.ui.widget.js”></script>
<script src=”js/jquery.ui.mouse.js”></script>
<script src=”js/jquery.ui.slider.js”></script>

<script>

$(function() {

$( “#slider-vertical” ).slider({

orientation: “vertical”,

range: “min”,

min: 0,

max: 100,

value: 60,

slide: function( event, ui ) {

$( “#amount” ).val( ui.value );

}

});

$( “#amount” ).val( $( “#slider-vertical” ).slider( “value” ) );

});

</script>

</head>

<body>

<div>
<p>

<label for=”amount”>Volume:</label>

<input type=”text” id=”amount” style=”border:0; color:#f6931f; font-weight:bold;” />

</p>
<div id=”slider-vertical” style=”height:200px;”></div>
</div>
</body>

</html>

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‘.

You may also like...

1 Response

  1. blogwalking saja kang 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *