Input Rentang Ganda Native

• @stanko/dual-range-input adalah pustaka input rentang ganda native yang menggunakan dua input rentang HTML native.
  • Dengan menggunakan input native, semua interaksi bawaan dan fitur aksesibilitas tetap dipertahankan.
  • Terdiri dari sekitar 50 baris JavaScript dan CSS.
• Mengapa ini diperlukan
  • Digunakan UI untuk menyesuaikan parameter dalam alat gambar generatif, dan dibutuhkan slider minimum serta maksimum.
  • Solusi yang ada bergantung pada JavaScript dan mengimplementasikan ulang fitur drag serta aksesibilitas.
  • Ingin menggunakan input rentang HTML native, dan saat trek diklik, slider terdekat harus berpindah ke nilai tersebut.
• Cara kerjanya
  • Dua input ditempatkan berdampingan, dan saat input berubah, titik tengah dari kedua nilai dihitung.
  • Atribut minimum dan maksimum diatur ke titik tengah, lalu lebar input diperbarui.
• Mengubah ukuran input
  • Saat menghitung lebar input, perlu diperhatikan bahwa trek lebih pendek daripada lebar input sebenarnya.
  • Perhitungannya disederhanakan dengan menambahkan lebar thumb ke lebar input.
  • Padding ditambahkan ke wrapper input untuk mengakomodasi tambahan lebar thumb.
• Memindahkan thumb saat diklik
  • Ukuran input disesuaikan agar bertemu di titik tengah, sehingga saat diklik, thumb terdekat berpindah ke nilai tersebut.
  • Jika mode debug diaktifkan, titik tengah dapat dilihat dengan mudah.
• Styling
  • Input rentang dapat diberi gaya menggunakan CSS.
  • Styling untuk trek dan thumb cukup sederhana, dan radius batas di bagian sambungan tengah trek dihilangkan.
• Tema
  • Beberapa variabel diekspos agar tema dapat diubah dengan mudah.
  • Nilai default disediakan, dan tema dapat dibuat dengan menimpa variabel tersebut.
• Gradien
  • Menggunakan gradien CSS untuk mewarnai rentang yang dipilih.
  • Variabel --dri-gradient-position digunakan untuk mengatur gradien, dan diperbarui dalam kode bersama lebarnya.
• Kesimpulan
  • Tulisan ini dibuat untuk merapikan pemikiran, dan diharapkan bisa menginspirasi untuk mencoba menggunakan elemen native.

[GN⁺]

Komentar Hacker News

• Bagian tengah slider harus selalu bisa digerakkan, dan seperti contoh Unity, seharusnya kedua handle bisa digerakkan secara bersamaan
• Penulis membuat slider untuk gambar generatifnya sendiri, dan lebih suka menyeret slider untuk melihat perubahan gambar daripada memasukkan angka
• Ada bug di mana setelah slider diatur ke 100-100, nilainya tidak bisa diubah menjadi 99-99, dan masalah ini mudah terjadi di ujung slider
• Mereka merasa implementasi nilai ganda diperlukan untuk HTML <input type=range>, dan di Firefox ada bug saat mengklik handle yang membuat nilainya berubah satu langkah setiap kali
• Di design system perusahaan, seorang intern pernah membuat POC serupa, tetapi muncul masalah nilai input yang melompat, lalu intern lain mengusulkan solusi dengan rentang input yang saling tumpang tindih
• Istilah "native" masih bisa diperdebatkan; jika membutuhkan JavaScript, menurut mereka itu tidak lagi native
• Mereka memakai React untuk mengimplementasikan fitur tertentu, tetapi mengalami kesulitan karena tidak terlalu mahir dalam pengembangan frontend
• Mereka pernah memakai jQuery UI slider, tetapi harus menambahkan jQuery dan jQuery UI hanya untuk satu slider
• Ini bisa bekerja bahkan tanpa JavaScript; yang diperlukan hanya membuat perhitungan lebar di CSS lebih canggih agar bergantung pada nilai slider
• Mereka bertanya-tanya apakah ini tempat yang tepat untuk melaporkan bug, dan ada masalah pada dua contoh pertama di mana handle menghalangi interaksi sentuh sehingga mengganggu scroll