Input Range di HTML

Di beberapa formulir, kita bisa menemukan slider yang biasanya terlihat lebih menarik dan memudahkan user memasukkan data karena hanya perlu menggeser mouse saja tanpa perlu memasukkan nilai tepatnya.

Di HTML, kita bisa menampilkan slider dengan input type range

<input type="range" />

Yang menghasilkan

Silahkan geser bulatan slider di atas untuk memainkannya

Secara otomatis, jarak yang digunakan pada nilai slider ini adalah 0 - 100.

Memberi nilai awal

Untuk memberi nilai maksimal, gunakan atribut value di inputnya.

<input type="range" value="70"/>

Yang menghasilkan

Menampilkan angka / nilai

Tidak cukup dengan HTML saja, kita memerlukan teknologi lain yaitu javascript untuk menampilkan nilai sebenarnya. Kita tidak akan belajar sekarang, tapi di demo nya akan diperlihatkan untuk membantu kamu menvisualisasikan nilainya

Menentukan nilai maksimal slider

Untuk memberi nilai maksimal, gunakan atribut max

<input type="range" max="50" />

Yang menghasilkan

Geser dan lihat nilai maksimalnya!

Menentukan nilai minimal slider

Untuk memberi nilai minimal, gunakan atribut min

<input type="range" min="50" />

Yang menghasilkan

Geser dan lihat nilai minimalnya!

Menentukan jumlah step

Untuk menentukan jumlah step/langkah perpindahan, saat slider digeser, gunakan atribut step

<input type="range" step="10" />

Yang menghasilkan

Geser dan lihat nilainya, sekarang akan pindah per 10 angka!