Membuat Slider menggunakan jQuery

Membuat Slider dengan menggunakan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat slider dengan menggunakan jQuery.

See the Pen Membuat Slider menggunakan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #slider {
      width: 200px;
      margin: 20px;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#slider").slider({
        min: 0,
        max: 100,
        value: 50,
        slide: function(event, ui) {
          $("#slider-value").text(ui.value);
        }
      });
    });
  </script>
</head>
<body>
  <div id="slider"></div>
  <p>Nilai slider: <span id="slider-value">50</span></p>
</body>
</html>
HTML

Dalam contoh kode di atas, kita menggunakan jQuery dan jQuery UI untuk membuat slider. Pertama, kita memuat library jQuery dan jQuery UI dengan menambahkan script dan link stylesheet di dalam <head> tag.

Kemudian, kita menambahkan elemen <div> dengan id “slider” di dalam <body> tag. Ini adalah elemen yang akan menjadi slider.

Selanjutnya, dalam script jQuery, kita menggunakan fungsi $(document).ready() untuk memastikan bahwa kode di dalamnya dijalankan setelah halaman selesai dimuat.

Di dalam fungsi tersebut, kita memanggil fungsi $("#slider").slider() untuk menginisialisasi slider. Kita memberikan beberapa opsi seperti min (nilai minimum), max (nilai maksimum), dan value (nilai awal) untuk mengatur perilaku slider.

Selain itu, kita juga menggunakan fungsi slide untuk mengupdate nilai slider saat digeser. Di dalam fungsi tersebut, kita menggunakan $("#slider-value").text(ui.value) untuk mengubah teks pada elemen dengan id “slider-value” sesuai dengan nilai slider yang baru.

Terakhir, kita menambahkan elemen <p> untuk menampilkan nilai slider saat ini dengan menggunakan elemen <span> dengan id “slider-value”.

Tutorial lainnya:

Dengan menggunakan contoh kode di atas, Anda dapat membuat slider yang interaktif menggunakan jQuery dan jQuery UI dalam halaman HTML Anda.

Artikel Terbaru ⭐