อินพุตช่วงคู่แบบเนทีฟ

 (muffinman.io)
2 คะแนน โดย GN⁺ 2024-12-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • @stanko/dual-range-input เป็นไลบรารีอินพุตช่วงคู่แบบเนทีฟที่ใช้ HTML range input แบบเนทีฟสองตัว
    • ใช้อินพุตแบบเนทีฟ จึงคงการโต้ตอบพื้นฐานและความสามารถด้านการเข้าถึงทั้งหมดไว้
    • สร้างขึ้นด้วย JavaScript และ CSS ราว 50 บรรทัด
  • ทำไมจึงจำเป็น
    • ใช้ UI สำหรับปรับพารามิเตอร์ในเครื่องมือวาดภาพเชิงกำเนิด และต้องการสไลเดอร์ค่าต่ำสุดและค่าสูงสุด
    • โซลูชันที่มีอยู่เดิมพึ่งพา JavaScript และต้องสร้างความสามารถการลากและการเข้าถึงขึ้นมาใหม่
    • ต้องการใช้ HTML range input แบบเนทีฟ และเมื่อคลิกแทร็ก นิ้วจับที่อยู่ใกล้ที่สุดควรย้ายไปยังค่านั้น
  • หลักการทำงาน
    • อินพุตสองตัวถูกวางไว้เคียงกัน และเมื่ออินพุตเปลี่ยนแปลง จะคำนวณจุดกึ่งกลางของสองค่า
    • ตั้งค่าแอตทริบิวต์ต่ำสุดและสูงสุดเป็นจุดกึ่งกลาง และอัปเดตความกว้างของอินพุต
  • การปรับขนาดอินพุต
    • ตอนคำนวณความกว้างของอินพุต ต้องคำนึงว่าแทร็กสั้นกว่าความกว้างจริงของอินพุต
    • คำนวณอย่างง่ายโดยเพิ่มความกว้างของนิ้วจับเข้าไปในความกว้างของอินพุต
    • เพิ่ม padding ให้ตัวห่ออินพุตเพื่อรองรับความกว้างเพิ่มเติมของนิ้วจับ
  • ย้ายนิ้วจับเมื่อคลิก
    • อินพุตจะถูกปรับขนาดให้มาบรรจบกันที่จุดกึ่งกลาง และเมื่อคลิก นิ้วจับที่อยู่ใกล้ที่สุดจะย้ายไปยังค่านั้น
    • หากเปิดโหมดดีบัก จะเห็นจุดกึ่งกลางได้ง่าย
  • การจัดสไตล์
    • สามารถใช้ CSS เพื่อจัดสไตล์ให้ range input ได้
    • การจัดสไตล์แทร็กและนิ้วจับทำได้ง่าย และลบรัศมีขอบที่ส่วนเชื่อมตรงกลางของแทร็ก
  • ธีม
    • เปิดเผยตัวแปรหลายตัวเพื่อให้เปลี่ยนธีมได้ง่าย
    • มีค่าเริ่มต้นให้ และสามารถสร้างธีมได้ด้วยการ override ตัวแปร
  • กราเดียนต์
    • ใช้ CSS gradient เพื่อระบายช่วงที่ถูกเลือก
    • ใช้ตัวแปร --dri-gradient-position เพื่อตั้งค่ากราเดียนต์ และอัปเดตร่วมกับความกว้างในโค้ด
  • สรุป
    • โพสต์นี้มีไว้เพื่อจัดระเบียบความคิด และหวังว่าจะช่วยสร้างแรงบันดาลใจให้ลองใช้องค์ประกอบแบบเนทีฟ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-12-06
ความเห็นจาก Hacker News
  • ส่วนตรงกลางของสไลเดอร์ควรเลื่อนได้เสมอ และควรเลื่อนแฮนเดิลทั้งสองด้านพร้อมกันได้เหมือนตัวอย่างของ Unity
  • ผู้เขียนสร้างสไลเดอร์ขึ้นมาใช้กับงานภาพเชิงกำเนิดของตนเอง และชอบลากสไลเดอร์เพื่อดูการเปลี่ยนแปลงของภาพมากกว่าการพิมพ์ตัวเลข
  • มีบั๊กที่เมื่อตั้งค่าสไลเดอร์เป็น 100-100 แล้วจะเปลี่ยนเป็น 99-99 ไม่ได้ และปัญหานี้เกิดขึ้นได้ง่ายที่ปลายสุดของสไลเดอร์
  • คิดว่า HTML <input type=range> ควรมีการรองรับค่าคู่โดยตรง และใน Firefox ก็มีบั๊กที่เมื่อคลิกแฮนเดิลแล้วค่าจะเปลี่ยนทีละหนึ่งขั้น
  • ในดีไซน์ซิสเต็มของบริษัทมีอินเทิร์นคนหนึ่งทำ POC ที่คล้ายกันไว้ แต่เกิดปัญหาค่าอินพุตกระโดด จึงมีอินเทิร์นอีกคนเสนอวิธีแก้ด้วยช่วงอินพุตที่ซ้อนทับกัน
  • คำว่า "เนทีฟ" ยังเป็นคำที่ถกเถียงกันได้ และถ้าต้องใช้ JavaScript ก็อาจไม่ถือว่าเป็นเนทีฟอีกต่อไป
  • มีการใช้ React เพื่อทำฟีเจอร์บางอย่าง แต่ก็พบความยากลำบากเพราะไม่ถนัดการพัฒนาฝั่งฟรอนต์เอนด์
  • เคยใช้ jQuery UI slider แต่ต้องเพิ่มทั้ง jQuery และ jQuery UI เข้ามาเพียงเพื่อสไลเดอร์ตัวเดียว
  • มันสามารถทำงานได้โดยไม่ต้องใช้ JavaScript และเพียงทำให้การคำนวณความกว้างของ CSS อาศัยค่าสไลเดอร์อย่างซับซ้อนขึ้น
  • ไม่แน่ใจว่านี่เป็นสถานที่ที่เหมาะสำหรับการรายงานบั๊กหรือไม่ และแฮนเดิลของสองตัวอย่างแรกก็ขวางการโต้ตอบแบบสัมผัสจนรบกวนการเลื่อนหน้าจอ