Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Konfigurasi jQuery UI Slider

Slider adalah elemen UI berbentuk variabel klasik. Untuk mendapatkan nilai, Anda harus menggeser slider ke kanan atau ke kiri, ke atas dan ke bawah. Meskipun metodenya terlihat klasik, namun sangat menarik untuk ukuran antarmuka berupa objek digital.

jQuery UI Slider

Dasar Penggunaan

Mengubah elemen tertentu menjadi Slider dilakukan dengan cara menerapkan fungsi .slider() pada elemen yang diseleksi:

$('#slider').slider();

Lihat Demo

Konfigurasi jQuery UI Slider

Opsi Nilai Deskripsi
value 0, 1, 2, 3, ... (numerik) Menentukan letak slider handle saat pertama kali halaman terakses/dikunjungi. (default: 0)
step 0, 1, 2, 3, ... (numerik) Menentukan nilai step dengan bilangan tertentu akan membuat slider handle bergeser dengan akurat pada loncatan sebesar nilai step. (default: 1)
min 0, 1, 2, 3, ... (numerik) Menentukan nilai terendah Slider. (default: 0)
max 0, 1, 2, 3, ... (numerik) Menentukan nilai tertinggi Slider. (default: 100)
range "min" Nilai "min" akan memberikan dekorasi berupa warna tertentu (sesuai tema) pada sisa jarak di belakang slider handle, sedangkan "max" akan memberikan dekorasi warna pada sisa jarak di depan slider handle. Ini hanya untuk keperluan antarmuka. Nilai true agak rumit untuk dijelaskan. Intinya adalah, nilai ini digunakan untuk menyatakan bahwa Anda akan menerapkan dua buah slider handle pada satu bar. Ini adalah syarat pertama untuk membuat slider berganda. (default: false)
"max"
true
values [1, 20] (Array) Saat Anda menuliskan opsi ini, maka opsi value sudah tidak diperlukan lagi. Opsi ini hanya digunakan jika Anda akan menciptakan dua buah slider handle dalam satu bar, yaitu setelah Anda menyatakan range:true. Angka pertama menyatakan letak slider handle pertama dan angka ke dua menyatakan letak slider handle ke dua. (default: null)
orientation "horizontal" Pilihan untuk menentukan orientasi Slider. "horizontal" akan memposisikan Slider secara horizontal, "vertical" akan memposisikan Slider secara vertikal. (default: "horizontal")
"vertical"
slide function(event, ui) {} ini adalah opsi terpenting. Opsi ini digunakan untuk mengambil data dari Slider.

Contoh Penerapan

Secara normal, betapapun lebar dan tinggi jarak/range Slider, nilai akan selalu dimulai dari 0 dan berakhir pada 100. Ini adalah sistem persentase. Jadi, Saya rasa Anda tidak akan kesulitan untuk mengimajinasikannya.

value:30

Menentukan nilai value sebesar 30 akan menempatkan slider handle pada jarak 30% dari keseluruhan lebar bar:

$('#slider').slider({value:30});

Lihat Demo

step:10

Menentukan nilai step sebesar 10 akan membuat langkah slider handle lebih tegas dan terukur. Ini diperlukan jika Anda menginginkan nilai yang akurat sehingga akan mempermudah perhitungan selanjutnya:

$('#slider').slider({step:10});

Lihat Demo

range:"min" dan range:"max"

Menentukan nilai range:"min" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di belakang slider handle.

Menentukan nilai range:"max" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di depan slider handle:

$('#slider1').slider({range:"min"});
$('#slider2').slider({range:"max"});
jQuery UI Slider
jQuery UI Slider - Range

Lihat Demo

Pengambilan Data

Pengambilan data dapat dilakukan dengan menambahkan opsi slide. Nilainya berupa fungsi jQuery UI Slider yang secara umum dapat dituliskan seperti ini:

slide:function(event, ui) {
    $('#data-1').val(ui.value);
}

ui.value adalah variabel bawaan dari jQuery UI Slider. Nilainya bisa berubah-ubah sesuai dengan pergerakan slider handle. Di sini Saya menggunakan .val() untuk menyisipkan data karena elemen yang akan disisipi adalah elemen <input>. Jika elemen yang akan Anda gunakan berupa elemen biasa dan bukan merupakan elemen-elemen formulir, Anda bisa menggunakan alternatif .text() atau .html() (pelajari di sini).

Kita buat dua buah elemen. Elemen pertama akan menjadi Slider UI dan elemen ke dua akan menjadi pencatat nilai:

<div id='slider'></div>
<input type='text' id='data-1'>

Kemudian kita buat slidernya seperti ini:

$('#slider').slider({
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});

Kode di atas akan menyisipkan data ui.value ke dalam elemen <input type='text' id='data-1'> setiap kali slider handle digerakkan:

Lihat Demo

min:30 dan max:1000

Menentukan nilai min:30 akan mengubah nilai minimal Slider yang secara normal adalah 0 menjadi 30. Menentukan nilai max:1000 akan mengubah nilai maksimal Slider yang secara normal adalah 100 menjadi 1000.

$('#slider').slider({
    min:30,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});
jQuery UI Slider
Manipulasi Nilai Minimal dan Maksimal jQuery UI Slider

Lihat Demo

orientation:"vertical"

orientation:"vertical" digunakan jika Anda menginginkan Slider dengan orientasi vertikal. Slider horizontal memiliki kemampuan melebarkan diri karena memang itulah sifat dasar elemen blok. Namun Slider vertikal tidak bisa begitu. Anda harus menentukan tinggi Slider vertikal sendiri dengan perantara .height() atau cukup mendeklarasikan tinggi dengan nilai tertentu pada selektor CSS elemen yang dimaksud:

Perantara .height()

$('#slider').slider({orientation:"vertical"}).height(300);

Mendeklarasikannya dalam CSS

#slider {height:300px}
$('#slider').slider({orientation:"vertical"})

Lihat Demo


Menggabungkan Beberapa Opsi

<h1 id='data-1'>Berat badan Anda?</h1>
<div id='slider'></div>
$('#slider').slider({
    range:"min",
    value:10,
    min:10,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').text(ui.value + ' Kg');
    }
});

Lihat Demo

Slider Berganda

Dalam satu Slider dapat diterapkan lebih dari satu slider handle. Hal ini biasanya digunakan untuk keperluan menentukan nilai minimal dan maksimal. Syarat pertama untuk menciptakan slider berganda adalah dengan menentukan opsi range:true, setelah itu tentukan nilai values berupa dua buah range dalam array.

Opsi value sudah tidak diperlukan lagi di sini karena telah digantikan oleh values. Variabel Slider tidak lagi berupa ui.value namun berubah menjadi ui.values[0] untuk handle pertama dan ui.values[1] untuk handle ke dua.

<div id='slider'></div>
<label for='dataMin'>Minimal: </label><input type='text' id='dataMin' />
<label for='dataMax'>Maksimal: </label><input type='text' id='dataMax' />
$('#slider').slider({
    range:true,
    values:[10, 70],
    slide:function(event, ui) {
        $('#dataMin').val(ui.values[0]);
        $('#dataMax').val(ui.values[1]);
    }
});

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 1 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!