Dapat digunakan sebagai alternatif JQuery UI Slider atau plugin-plugin sejenis yang memiliki ukuran berkas cukup besar. Terkadang Saya memerlukan sesuatu yang sejenis dengan itu, tetapi dengan fitur yang lebih sederhana. Asalkan bisa digunakan untuk memperbaharui nilai dengan cara menggeser-geser dragger maka itu sudah cukup. Jadi Saya membuat ini:
Dasar Penggunaan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/shell.css" rel="stylesheet">
</head>
<body>
<div id="range-slider-1"></div>
<script src="js/range-slider.js"></script>
<script>
rangeSlider(document.getElementById('range-slider-1'), {
drag: function(v) {
console.log(v + '%');
}
});
</script>
</body>
</html>Konfigurasi
| Opsi | Keterangan |
|---|---|
value | Digunakan untuk menentukan posisi dragger saat inisiasi. Nilai yang bisa diterima adalah dari angka 1 sampai 100 (berdasarkan persentase). |
vertical | Set sebagai true untuk membuat range slider vertikal. |
rangeClass | Digunakan untuk menambahkan kelas ekstra pada jalur penggeser. |
draggerClass | Digunakan untuk menambahkan kelas ekstra pada penggeser. |
drag | Fungsi untuk menampilkan nilai range slider ke elemen tertentu. |
var defaults = {
value: 0, // set default value on initiation from `0` to `100` (percentage based)
vertical: false, // vertical or horizontal?
rangeClass: "", // add extra custom class for the range slider track
draggerClass: "", // add extra custom class for the range slider dragger
drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something
};Lolos tes pada semua peramban mayor, termasuk Internet Explorer 8.
Tidak ada komentar:
Posting Komentar