Membuat Range dengan Bootstrap 5

Membuat Range dengan Bootstrap 5

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat range dengan menggunakan Bootstrap 5 dan mengaplikasikannya dalam sebuah form HTML

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h3>Range</h3>
         <form>
            <div class="mb-3">
               <label for="rangeInput" class="form-label">Pilih Nilai Range:</label>
               <input type="range" class="form-range" id="rangeInput" min="0" max="100" step="1">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
         </form>
      </div>
   </body>
</html>
HTML
Bootstrap Example

Range


Anda dapat menyalin kode di atas dan menyimpannya dalam file HTML. Ketika file tersebut dijalankan di browser, Anda akan melihat sebuah form dengan sebuah slider range yang dapat digeser dari 0 hingga 100.

Semoga contoh kode di atas dapat membantu Anda dalam membuat range dengan menggunakan Bootstrap 5 dan mengaplikasikannya dalam form HTML.

Artikel Terbaru ⭐