Dukungan Multirange Polyfill untuk Slider HTML5 Menangani Ganda

Itu input rentang HTML5 baru fantastis untuk jumlah dan pilihan dinamis seperti tanggal. Tapi slider range default tidak mendukung banyak pegangan.

Memasukkan Multirange, Sebuah polyfill dibuat untuk mendukung banyak pegangan yang berfungsi dengan baik dan mendukung semua browser utama.

Ini adalah sebuah alat gratis dan itu menyediakan cara terbaik untuk tambahkan beberapa pegangan secara asli, tanpa menggunakan plugin. Polyfill ini sudah dua sumber: Sebuah File JS dan a File CSS. Mereka keduanya bekerja pada input rentang dan kamu bisa unduh keduanya dari repo GitHub utama.

Catatan ini berarti Anda harus bekerja dengan browser itu sudah mendukung input rentang secara default. Juga membutuhkan variabel CSS yang tidak didukung di semua browser.

Syukurlah, Multirange menggunakan fallback CSS di mana dua slider rentang digunakan, bukan satu. Ini bukan solusi yang sempurna tetapi masih menawarkan antarmuka yang bisa digunakan. Sisi positifnya, ini bekerja tepat di luar kotak tanpa pamrih.

Hanya tambahkan file ke situs Anda dan kamu akan bisa menggunakan berganda atribut pada bidang slider Anda. Anda juga bisa atur rentang untuk nilai input dengan koma.

Ini a cuplikan singkat HTML menggunakan slider Multirange:

Pegangannya bisa diseret melewati satu sama lain dan bahkan tertinggal satu sama lain. Dan rentang input masih mendukung navigasi keyboard yang bagus untuk aksesibilitas.

Semua demo dan sampel kode sumber dapat ditemukan di halaman web Multirange, jadi periksalah jika Anda mencari slider HTML multi-range.