Yerel İkili Aralık Girdisi

• @stanko/dual-range-input, iki yerel HTML aralık girdisi kullanan yerel bir ikili aralık girdisi kütüphanesidir.
  • Yerel girdileri kullanarak tüm varsayılan etkileşimleri ve erişilebilirlik özelliklerini korur.
  • Yaklaşık 50 satır JavaScript ve CSS'ten oluşur.
• Neden gerekli
  • Üretken çizim aracında parametreleri ayarlamak için bir UI kullanırken, minimum ve maksimum kaydırıcılara ihtiyaç duyulur.
  • Mevcut çözümler JavaScript'e bağımlıdır ve sürükleme ile erişilebilirlik işlevlerini yeniden uygular.
  • Yerel HTML aralık girdileri kullanılmalı ve piste tıklandığında en yakın kaydırıcı o değere gitmelidir.
• Nasıl çalışır
  • İki girdi yan yana yerleştirilir ve girdi değiştiğinde iki değerin orta noktası hesaplanır.
  • Minimum ve maksimum özellikleri orta noktaya ayarlanır, ardından girdinin genişliği güncellenir.
• Girdi boyutlandırma
  • Girdi genişliği hesaplanırken, pistin gerçek girdi genişliğinden daha kısa olduğu dikkate alınmalıdır.
  • Basit bir hesaplama için girdi genişliğine başparmak genişliği eklenir.
  • Başparmağın ek genişliğini karşılamak için girdi sarmalayıcısına dolgu eklenir.
• Tıklamada başparmağı hareket ettirme
  • Girdiler orta noktada buluşacak şekilde yeniden boyutlandırılır ve tıklandığında en yakın başparmak ilgili değere gider.
  • Hata ayıklama modu açıldığında orta nokta kolayca görülebilir.
• Stil verme
  • CSS kullanılarak aralık girdisi stillendirilebilir.
  • Pist ve başparmağın stillendirilmesi basittir; pistin ortadaki birleşim kısmında kenar yarıçapı kaldırılır.
• Tema
  • Temayı kolayca değiştirebilmek için birden fazla değişken dışa açılır.
  • Varsayılan değerler sağlanır ve değişkenler ezilerek tema oluşturulabilir.
• Gradyan
  • Seçilen aralık, CSS gradyanı kullanılarak boyanır.
  • Gradyanı ayarlamak için --dri-gradient-position değişkeni kullanılır ve kod içinde genişlikle birlikte güncellenir.
• Sonuç
  • Bu yazı, düşünceleri düzenlemek için yazılmıştır ve yerel öğeleri denemek için ilham vermeyi amaçlar.

[GN⁺]

Hacker News yorumları

• Slider'ın orta kısmı her zaman hareket ettirilebilir olmalı ve Unity örneğinde olduğu gibi her iki tutamaç da aynı anda hareket ettirilebilmelidir
• Yazar, kendi üretici çizimleri için slider yaptı ve sayı girmektense slider'ı sürükleyerek görseldeki değişimi görmeyi tercih ediyor
• Slider 100-100'e ayarlandıktan sonra 99-99'a değiştirilemeyen bir hata var; bu sorun slider'ın uçlarında kolayca ortaya çıkıyor
• HTML <input type=range> için çift değerli bir uygulama gerektiği düşünülüyor ve Firefox'ta tutamaç tıklanırken değerin bir adım değişmesine neden olan bir hata bulunuyor
• Şirketin tasarım sisteminde bir stajyer benzer bir POC yaptı, ancak giriş değerlerinin zıplaması sorunu yaşandı; başka bir stajyer bunun için çakışan giriş aralıklarıyla bir çözüm önerdi
• "Native" terimi tartışmaya açık; JavaScript gerekiyorsa artık native olmadığı düşünülüyor
• Belirli bir özelliği uygulamak için React kullanıldı, ancak frontend geliştirmede deneyimsizlik nedeniyle zorluk yaşandı
• jQuery UI slider kullanıldı, ancak tek bir slider için jQuery ve jQuery UI eklemek gerekti
• JavaScript olmadan da çalışabilir; bunun için CSS genişlik hesaplamasının slider değerine bağlı olacak şekilde daha gelişmiş hale getirilmesi yeterli
• Burasının hata raporu için uygun yer olup olmadığı sorgulanıyor ve ilk iki örnekteki tutamaçların dokunmatik etkileşimi engelleyerek kaydırmayı bozduğu belirtiliyor