<label for="fRange">Range</label>
<input type="range" id="fRange" min="0" max="20">
Masukan jangkauan menyediakan UI slider yang dikirimkan adalah angka: ini untuk kontrol "tidak tepat", atau bila jumlah spesifik yang dipilih lebih relatif daripada harus tepat.
Opera, Safari, Firefox dan Chrome menyediakan jalur slider abu-abu dengan ibu jari melingkar, yang berwarna biru di Safari dan abu-abu di tempat lain. Di sisi lain, IE, menyediakan jalur jangkauan biru dan abu-abu segi empat dengan jempol persegi hitam.
Secara default, selain di IE, tidak ada kutu di sepanjang jalur slider. Untuk membuat kutu di sepanjang slider, buat <datalist> dengan semua nilai dan tambahkan atribut daftar untuk menunjuk ke datalist itu. Dalam kasus datalist terkait, semua browser yang mendukung tanda centang akan menampilkan tanda centang untuk setiap nilai <option> yang valid dalam linked <datalist>.
Jika tidak ada atribut daftar yang ada, IE akan menyertakan kutu berdasarkan atribut langkah dengan maksimum 6 kutu, mengingat nilai default untuk langkah adalah 1, dimulai dengan tanda centang pertama pada nilai minimum, dan tanda centang terakhir adalah nilai maksimum jika keduanya valid Tidak ada kutu yang akan ditampilkan jika step = "any".
IE adalah satu-satunya browser yang menampilkan nomor aktual yang saat ini dipilih: saat pengguna meluncur di sepanjang jempol, nilai saat ini ditampilkan sebagai tip tip. Peramban lain tidak menunjukkan nilai saat ini, yang OK sebagai spec mengatakan bahwa masukan rentang adalah untuk data yang nilai pastinya tidak penting.
Validasi / diperlukan tidak relevan karena slider akan selalu memiliki nilai yang valid - slider UI tidak memungkinkan untuk memilih nilai yang tidak valid.
Jatuh kembali ke input teks biasa, yang tidak terlalu berguna karena tidak memiliki pilihan yang ditentukan sebelumnya seperti rentang lakukan. Polypill melibatkan elemen pilih dan beberapa JavaScript.
Jika tidak ada nilai yang diberikan, nilai default bidang menjadi setengah jalan antara nilai min dan max, jika ada.
Hal ini dimungkinkan untuk membuat slider vertikal. Metode default akhirnya akan cukup mendeklarasikan lebar yang lebih sempit dari ketinggian. Sampai rentang vertikal terdeteksi secara otomatis, gaya tertentu akan meyakinkan browser. Untuk saat ini, sertakan atribut / atribut orient = "vertikal" untuk Firefox (lihat laporan bug), -webkit-appearance: slider-vertical; dalam deklarasi gaya untuk Safari, Chrome dan Opera, dan mode penulisan: bt-lr; dalam gaya Anda untuk Internet Explorer.
<input type = "range" name = "grade" orient = "vertical"
style = "width: 20px; height: 200px;
-webkit-appearance: slider-vertical;
mode penulisan: bt-lr; ">
Beberapa atribut, bila didukung pada tipe = "range", akan memungkinkan dua slider.
Opera, Safari, Firefox dan Chrome menyediakan jalur slider abu-abu dengan ibu jari melingkar, yang berwarna biru di Safari dan abu-abu di tempat lain. Di sisi lain, IE, menyediakan jalur jangkauan biru dan abu-abu segi empat dengan jempol persegi hitam.
Secara default, selain di IE, tidak ada kutu di sepanjang jalur slider. Untuk membuat kutu di sepanjang slider, buat <datalist> dengan semua nilai dan tambahkan atribut daftar untuk menunjuk ke datalist itu. Dalam kasus datalist terkait, semua browser yang mendukung tanda centang akan menampilkan tanda centang untuk setiap nilai <option> yang valid dalam linked <datalist>.
Jika tidak ada atribut daftar yang ada, IE akan menyertakan kutu berdasarkan atribut langkah dengan maksimum 6 kutu, mengingat nilai default untuk langkah adalah 1, dimulai dengan tanda centang pertama pada nilai minimum, dan tanda centang terakhir adalah nilai maksimum jika keduanya valid Tidak ada kutu yang akan ditampilkan jika step = "any".
IE adalah satu-satunya browser yang menampilkan nomor aktual yang saat ini dipilih: saat pengguna meluncur di sepanjang jempol, nilai saat ini ditampilkan sebagai tip tip. Peramban lain tidak menunjukkan nilai saat ini, yang OK sebagai spec mengatakan bahwa masukan rentang adalah untuk data yang nilai pastinya tidak penting.
Validasi / diperlukan tidak relevan karena slider akan selalu memiliki nilai yang valid - slider UI tidak memungkinkan untuk memilih nilai yang tidak valid.
Jatuh kembali ke input teks biasa, yang tidak terlalu berguna karena tidak memiliki pilihan yang ditentukan sebelumnya seperti rentang lakukan. Polypill melibatkan elemen pilih dan beberapa JavaScript.
Jika tidak ada nilai yang diberikan, nilai default bidang menjadi setengah jalan antara nilai min dan max, jika ada.
Hal ini dimungkinkan untuk membuat slider vertikal. Metode default akhirnya akan cukup mendeklarasikan lebar yang lebih sempit dari ketinggian. Sampai rentang vertikal terdeteksi secara otomatis, gaya tertentu akan meyakinkan browser. Untuk saat ini, sertakan atribut / atribut orient = "vertikal" untuk Firefox (lihat laporan bug), -webkit-appearance: slider-vertical; dalam deklarasi gaya untuk Safari, Chrome dan Opera, dan mode penulisan: bt-lr; dalam gaya Anda untuk Internet Explorer.
<input type = "range" name = "grade" orient = "vertical"
style = "width: 20px; height: 200px;
-webkit-appearance: slider-vertical;
mode penulisan: bt-lr; ">
Beberapa atribut, bila didukung pada tipe = "range", akan memungkinkan dua slider.
