รองรับ Polyfill แบบหลายจุดสำหรับตัวเลื่อน HTML5 แบบ Dual-Handle

อินพุตช่วง HTML5 ใหม่ ยอดเยี่ยมสำหรับปริมาณและการเลือกแบบไดนามิกเช่นวันที่ แต่แถบเลื่อนช่วงเริ่มต้น ไม่รองรับมือจับหลายอัน.

เข้าสู่ MultiRange, polyfill สร้างขึ้นเพื่อรองรับการจัดการหลาย ทำงานได้อย่างถูกต้องและรองรับเบราว์เซอร์หลักทั้งหมด.

มันคือ เครื่องมือฟรี และเป็นวิธีที่ดีที่สุดในการ เพิ่มการจัดการหลายอย่างโดยกำเนิด, โดยไม่ต้องใช้ปลั๊กอิน polyfill นี้มี สองทรัพยากร: ไฟล์ JS และ ไฟล์ CSS. พวกเขา ทำงานทั้งในอินพุตช่วง และคุณสามารถ ดาวน์โหลดทั้งคู่ จาก repo หลักของ GitHub.

หมายเหตุนี่หมายความว่าคุณต้องทำงานกับเบราว์เซอร์ที่ รองรับอินพุตช่วงแล้ว โดยค่าเริ่มต้น. มันยัง ต้องใช้ตัวแปร CSS ซึ่งไม่รองรับในเบราว์เซอร์ทั้งหมด.

โชคดีที่หลายเครื่อง ใช้ CSS fallback ที่สองช่วงเลื่อนถูกนำมาใช้แทนหนึ่ง นี่ไม่ใช่โซลูชันที่สมบูรณ์แบบ แต่ยังคงมีอินเทอร์เฟซที่ใช้งานได้ ด้านบวกนี่ ใช้งานได้ทันทีนอกกรอบ ไม่มีสตริงที่แนบมา.

เพียงแค่ เพิ่มไฟล์ในเว็บไซต์ของคุณ และคุณจะสามารถ ใช้ หลายอย่าง คุณลักษณะ บนฟิลด์ตัวเลื่อนของคุณ นอกจากนี้คุณยังสามารถ กำหนดช่วงสำหรับค่าอินพุต ด้วยเครื่องหมายจุลภาค.

นี่คือ ตัวอย่างสั้น ๆ ของ HTML ใช้แถบเลื่อน Multirange:

ที่จับสามารถ ลากผ่านมา และแม้กระทั่ง ทิ้งไว้ซึ่งกันและกัน. และช่วงอินพุตยังคง รองรับการนำทางคีย์บอร์ด ซึ่งดีสำหรับการเข้าถึง.

ทั้งหมด การสาธิต และ ตัวอย่างซอร์สโค้ด สามารถพบได้ในหน้าเว็บหลายหน้าดังนั้นลองดูว่าคุณกำลังมองหา แถบเลื่อน HTML หลายช่วง.