Apakah mungkin membuat slider HTML5 dengan dua nilai input, misalnya untuk memilih kisaran harga? Jika ya, bagaimana caranya?
99
Tidak, masukan rentang HTML5 hanya menerima satu masukan. Saya akan merekomendasikan Anda untuk menggunakan sesuatu seperti slider rentang jQuery UI untuk tugas itu.
Saya telah mencari slider ganda yang ringan dan bebas ketergantungan untuk beberapa waktu (sepertinya gila untuk mengimpor jQuery hanya untuk ini) dan sepertinya tidak banyak di luar sana. Saya akhirnya sedikit memodifikasi kode @ Wildhoney dan sangat menyukainya.
Tampilkan cuplikan kode
sumber
Datang terlambat, tapi noUiSlider menghindari ketergantungan jQuery-ui, yang tidak dimiliki oleh jawaban yang diterima. Satu-satunya "peringatan" adalah dukungan IE untuk IE9 dan yang lebih baru, jika IE yang lama adalah pemecah kesepakatan untuk Anda.
Ini juga gratis, open source dan dapat digunakan dalam proyek komersial tanpa batasan.
Instalasi: Unduh noUiSlider, ekstrak file CSS dan JS di suatu tempat di sistem file situs Anda, lalu tautkan ke CSS dari head dan ke JS dari body:
Contoh penggunaan: Membuat penggeser dari 0 hingga 100, dan mulai disetel ke 20-80.
HTML:
JS:
sumber
Tentu Anda dapat dengan mudah menggunakan dua slider yang saling overlay dan menambahkan sedikit javascript (sebenarnya tidak lebih dari 5 baris) yang penyeleksi tidak melebihi nilai min / max (seperti dalam solusi @Garys).
Terlampir Anda akan menemukan cuplikan pendek yang diadaptasi dari proyek saat ini termasuk beberapa gaya CSS3 untuk menunjukkan apa yang dapat Anda lakukan (hanya webkit). Saya juga menambahkan beberapa label untuk menampilkan nilai yang dipilih.
Ini menggunakan JQuery tetapi versi vanillajs bukanlah sihir.
sumber
Sebenarnya saya menggunakan skrip saya di html secara langsung. Tetapi di javascript ketika Anda menambahkan event listener oninput untuk acara ini, itu memberikan data secara otomatis. Anda hanya perlu menetapkan nilai sesuai kebutuhan Anda.
sumber