Slider range HTML: min, max, step, Nilai Langsung, dan Reset

HTML input type="range" memilih angka dalam rentang yang ditentukan menggunakan slider. Tetapkan batas dan intervalnya dengan min, max, dan step, serta nilai awalnya dengan value. Ini cocok untuk penyesuaian relatif seperti volume atau kecerahan; gunakan elemen output terpisah dan JavaScript untuk menampilkan angka saat ini.

Pahami rentang dan nilai default

Input rentang tidak memiliki nilai kosong. Menghilangkan nilai tidak berarti "belum dipilih", dan atribut required tidak berlaku. Jika penting untuk mengetahui apakah pilihan survei dibuat secara eksplisit, pertimbangkan pilihan eksplisit atau metode input lain.

Langkah-langkah dihitung dari sebuah basis. Misalnya, min="16" max="32" step="2" memungkinkan 16, 18, 20, hingga 32. Peramban dapat menormalkan nilai awal di luar rentang atau langkah, jadi pastikan nilai aktual saat ini sesuai dengan default yang Anda inginkan.

Contoh lengkap: ubah ukuran font secara langsung

Simpan kode ini sebagai range.html dan buka di peramban. Tidak perlu server atau pustaka. Slider mengubah ukuran font kalimat contoh dari 16 hingga 32 px dengan langkah 2 px, dan pengiriman menampilkan data formulir yang sebenarnya daripada mengirimkannya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atur ukuran dengan range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Atur ukuran teks</h1>
  <form id="demo">
    <label for="fontSize">Ukuran contoh (16–32 px, langkah 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Ukuran saat ini: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Tampilkan nilai kiriman</button>
      <button type="reset">Atur ulang</button></p>
  </form>
  <p id="preview">Menggeser slider mengubah ukuran teks kalimat ini.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. Awalnya ukuran yang ditampilkan adalah 20 px dan pratinjau menggunakan ukuran itu. Kirim untuk melihat string "20" dengan nama fontSize.
2. Gerakkan slider dengan penunjuk dan periksa bahwa angka dan ukuran font diperbarui bersama. Gunakan Tab untuk mencapainya dan coba juga tombol panah.
3. Misalnya, satu langkah panah kanan mengubah 20 menjadi 22: tampilan menjadi 22 dan ukuran font 22 px. Pengiriman sekarang menunjukkan "22".
4. Reset mengembalikan slider, angka, dan ukuran pratinjau ke 20. Handler reset menjadwalkan pembaruan untuk frame berikutnya sehingga membaca nilai setelah reset asli berlaku.

Contoh memakai input agar tampilan langsung diperbarui selama pengaturan. Untuk memproses pengaturan yang sudah dikonfirmasi, pertimbangkan change. Waktu dan tujuannya berbeda; pilih sesuai kebutuhan pratinjau langsung.

Bedakan nilai saat ini, yang dikirimkan, dan nilai awal

slider.value adalah angka saat ini sebagai string; slider.valueAsNumber adalah numerik. Atribut nilai HTML adalah nilai awal: memindahkan slider tidak juga mengubah string atribut itu. Baca nilai elemen saat ini untuk ditampilkan atau disimpan.

output menampilkan hasil yang dihitung atau dipilih; ini tidak menggantikan kolom formulir yang dikirimkan. Contohnya mengirimkan input rentang bernama. Penyimpanan server nyata membutuhkan rute dan penanganan permintaan yang ada, serta validasi rentang dan langkah di sisi server.

Pilih antara rentang dan angka dan periksa tampilannya

Jika pengguna perlu memasukkan jumlah, jumlah uang, atau panjang yang tepat, pertimbangkan pengaturan input angka rentang dan langkah. Slider dengan cepat menyesuaikan tingkat perkiraan, tetapi memilih angka yang tepat bisa sulit di layar sempit. Ketika presisi diperlukan, input numerik yang disinkronkan dapat menyertai slider.

accent-color dapat mengubah warna aksen slider bawaan. Ini tidak selalu mewarnai setiap bagian secara identik, dan tampilan bervariasi tergantung pada browser dan sistem operasi. Periksa lebar pada perangkat seluler, ruang interaksi yang memadai, asosiasi label, fokus keyboard, dan tampilan numerik secara bersamaan.

Referensi range di MDN menjelaskan nilai bawaan dan dukungan atribut.