Buat Slider Pips Pakai noUiSlider Tutorial

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:

Buat Slider Pips Pakai noUiSlider Tutorial
Hasil dari Slider

Semoga artikel Buat Slider Pips Pakai noUiSlider Tutorial ini bermanfaat.

Similar Posts