Dalam aplikasi tertentu, slider merupakan sebuah komponen yang sering digunakan. Untuk membuat slider dengan pips (tanda nilai) dari 0 hingga 100 misalnya, kita dapat pakai noUiSlider. Plugin ini merupakan slider JavaScript ringan dan dapat kita disesuaikan dengan mudah.
Untuk membuat slider ini, setidaknya kita butuh 3 langkah yaitu tambahkan library (stylesheet dan script) dari noUiSlider, lalu memberikan element penampung slider dan membuat script untuk memberikan properti pada slider.
Langkah 1. Tambahkan library noUiSlider
Kita harus menambahkannya library ini, baik menggunakan CDN atau download filenya secara langsung dan memasukkan filenya di proyek kita. Berikut adalah contoh menggunakan CDN:
<!-- Tambahkan di dalam tag <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>Langkah 2. Buatkan Elemen Penampung
Buat elemen HTML untuk slider di tempat yang sesuai di halaman aplikasi kita:
<div id="slider"></div>Langkah 3. Buatkan Scriptnya
Inisialisasikan slider pakai JavaScript:
<script>
document.addEventListener('DOMContentLoaded', function () {
// Temukan elemen slider
var slider = document.getElementById('slider');
// Konfigurasikan slider
noUiSlider.create(slider, {
start: [50], // Nilai awal
range: {
'min': 0,
'max': 100
},
pips: {
mode: 'values',
values: [0, 25, 50, 75, 100],
density: 5
}
});
// Tambahkan event listener untuk mendengarkan perubahan nilai slider
slider.noUiSlider.on('update', function (values, handle) {
console.log('Nilai slider: ' + values[handle]);
});
});
</script>
Langkah 4. Lihat Hasilnya
Dalam contoh di atas, slider diinisialisasi dengan nilai awal 50 dan memiliki pips dengan nilai 0, 25, 50, 75, dan 100. Kita dapat menyesuaikan nilai awal dan nilai pips sesuai kebutuhan proyek kita. Selain itu, kita dapat menyesuaikan tata letak dan gaya slider menggunakan CSS sesuai dengan desain yang diinginkan.
Berikut adalah hasilnya:
Semoga artikel Buat Slider Pips Pakai noUiSlider Tutorial ini bermanfaat.