Yerel çift aralıklı giriş

 (muffinman.io)
2 puan yazan GN⁺ 2024-12-06 | 1 yorum | WhatsApp'ta paylaş
  • @stanko/dual-range-input, iki yerel HTML range input öğesini birleştirerek çift aralıklı bir slider oluşturur ve tarayıcının varsayılan etkileşimlerini ve erişilebilirliğini aynen kullanır
  • Uygulama, giriş değerlerini senkronize eden yaklaşık 50 satır JavaScript ve CSS üzerine kurulu olduğu için, sürükleme ve erişilebilirliği baştan oluşturan geleneksel yaklaşımlardan daha basittir
  • İki girişin min, max değerleri ve genişliği, seçilen değerlerin orta noktasına göre güncellenir; track’e tıklandığında daha yakın olan thumb ilgili değere gider
  • range input track’i gerçek giriş genişliğinden daha kısa olduğundan, thumb genişliği hesaplamaya eklenir ve fazla genişlik wrapper padding’iyle absorbe edilir
  • Tema CSS değişkenleri ve gradient ile ayarlanabilir; seçili aralık rengi, thumb boyutu ve track rengi gibi değerler override edilebilir

Yerel range input ile yapılmış çift slider

  • @stanko/dual-range-input, iki HTML range input öğesini yan yana yerleştirerek çift aralıklı giriş uygular
  • Buradaki “yerel”, tek bir tarayıcı kontrolü anlamına değil; iki range input kullanarak tarayıcının varsayılan etkileşimlerini ve erişilebilirlik özelliklerini korumak anlamına gelir
  • Uygulama, girişleri senkronize eden yaklaşık 50 satır JavaScript ve görsel tamamlayıcılık için CSS’ten oluşur
  • Çıkış noktası, üretken çizim aracında parametrelerin minimum ve maksimum değerlerini ayarlayan bir UI ihtiyacıydı
  • Gereksinimler iki taneydi
    • Yerel HTML range input kullanmak
    • Track’e tıklandığında iki thumb’dan tıklama noktasına daha yakın olanın ilgili değere gitmesi

Değer senkronizasyonu ve tıklama işleme

  • İki girişten biri değiştiğinde kütüphane, seçilen iki değer arasındaki orta noktayı hesaplar
    • Her girişin min ve max öznitelikleri orta noktaya göre ayarlanır
    • İki girişin genişliği de orta noktaya göre güncellenir
  • Girişlerin orta noktada buluşacak şekilde boyutu ayarlandığından, iki thumb arasına tıklandığında tıklama konumuna yakın olan thumb hareket eder
    • İki thumb arasındaki step sayısı tekse, en son kullanılan girişe öncelik verilir

CSS hesaplamaları ve stillendirme

  • range input’un track’i, toplam giriş genişliğinden daha kısadır ve tarayıcı thumb’ın dışarı taşmaması için iki yanda boşluk bırakır
    • Giriş genişliğini basitçe %25 ve %75 gibi bölmek, gerçek track oranını doğru vermez
    • Uygulama, her giriş genişliğine --dri-thumb-width ekler ve fazla genişliği karşılamak için wrapper’a padding ekler
  • Stillendirme, tarayıcının range input CSS stillendirme özelliklerini kullanır
    • track ve thumb süslenir; iki track’in birleştiği orta kısımda border radius oluşmaması sağlanır
  • Tema, CSS değişkenlerini override ederek oluşturulabilir
    • Başlıca değişkenler arasında --dri-height, --dri-thumb-width, --dri-thumb-color, --dri-track-color, --dri-track-filled-color, --dri-track-border-radius vb. yer alır
  • Seçili aralık CSS gradient ile boyanır
    • gradient konumu --dri-gradient-position değişkeniyle belirtilir
    • Kod, giriş genişliğini güncellerken bu değişkeni de birlikte günceller
  • Bu uygulama, özel bir kütüphaneyle sürükleme ve erişilebilirliği baştan oluşturmak yerine, mümkün olduğunca önce yerel öğeleri kullanma yaklaşımıdır

İlgili okumalar

1 yorum

 
GN⁺ 2024-12-06
Hacker News yorumları

  • Bu tür slider’larda ortadaki alanın da her zaman sürüklenebilir olması gerektiğini düşünüyorum. Yani ortadan tutunca iki tutamaç da aynı anda hareket etmeli
    Bu arada Unity bunu böyle ele alıyor: https://docs.unity3d.com/StaticFiles/ScriptRefImages/EditorG...

    • Buna karşılık ben ortadaki alana tıklamayı hiç düşünmezdim. Kafamda bu tamamen yeni bir widget değil, değiştirilmiş bir slider gibi görünüyordu
      “Her zaman” biraz fazla iddialı bir ifade olabilir

  • Yazarıyım. HN’de görmek güzel
    Burada issue ve hata raporları bırakılmaya başlandığını gördüm; burada saat geç olduğu için yarın bakmayı planlıyorum
    Üretken görsel işleri için buna ihtiyacım olduğu için yaptım; sayı girmektense slider’ı sürüklerken görüntünün nasıl değiştiğini görmeyi tercih ediyorum
    Mümkün olduğunca minimal tutmaya çalıştım

    • Bu yazıyı gerçekten çok beğendim. Sabah kahvemi içerken hesaplama sürecini ve debug modu açıklamasını keyifle okudum; native bileşenleri akıllıca kullanan bir yaklaşım olduğunu düşündüm
      Şu anda SwiftUI kullanıyorum ve kendi bileşenini yapmak neredeyse fazla kolay. Ama yazarın açıkladığı gibi bu her zaman en iyi yol değil; native bileşenler çoğu zaman oldukça dolu özelliklere sahip oluyor
      Yazıyı iOS’te Firefox gibi biraz sıra dışı bir tarayıcıda da denedim ve iyi çalıştı. Çok iyi yapılmış

  • Kendim denerken hemen bir bug’a denk geldim. Slider’ı 100 - 100 konumuna sürükledikten sonra 99 - 99 yapmaya çalışınca olmuyor
    99 - 100’den de gidilemiyor, 98 - 99’dan da gidilemiyor. 99 - 99’a ulaşmanın tek yolu alt sınırı 98’in altına çekmek
    98 - 99 durumundayken 97 - 99’a indirirseniz o zaman 99 - 99’a gidilebiliyor
    Bu bug her yerde ortaya çıkabilir; 99 - 99 yalnızca slider’ın ucuna yakın olduğu için en kolay yeniden üretilebilen durum. Genel olarak herhangi bir X - X durumunda uçlardan birini 1 adım oynatırsanız, diğer ucu o boşluğun içine çekemiyorsunuz. Aralığı kapatmak için önce diğer ucu daha uzağa sürüklemeniz gerekiyor

    • İyi yakalamışsın! Aslında bu durumu düşünmüştüm ve Chrome ile Firefox’ta çalışıyor; ama Safari sanırım mouse down sırasında focus olayı üretmiyor, ancak slider hareket etmeye başlayınca üretiyor
      Rapor için teşekkürler, mutlaka düzelteceğim
    • Masaüstü Linux’ta Chromium’da 100-100 → 99-100 → 99-99 düzgün çalışıyor
      Bunun yerine başka bir görsel bug var. 23-25’ten başlayıp 24-25’e sürükleyince 25’teki sağ tutamaç birkaç piksel hareket ediyor. Sol tutamacı tekrar 23’e getirince sağ tutamaç da geri dönüyor
    • Bu yüzden geliştirici araçları yapmayı seviyorum

  • Harika! HTML input’ta her zaman iki değerli aralık girişi uygulamasına ihtiyaç olduğunu düşünmüşümdür; çünkü oldukça mantıklı
    Örneğin “en az X, en fazla Y widget’a sahip ürünleri filtrelemek istiyorum” gibi kullanım senaryoları var
    Ancak Firefox’ta vurgulamak istediğim bir bug buldum. Minimum veya maksimum tutamacına her tıkladığınızda değer bir adım yukarı ya da aşağı değişiyor
    Tutamacın tam ortasına tıklamaya çalışırsanız değer değişmiyor; ama biraz soluna tıklarsanız seçili değer bir adım azalıyor, biraz sağına tıklarsanız artıyor
    Beklenen davranış, değerin yalnızca düğmeyi basılı tutup fare imlecini gerçekten hareket ettirdiğiniz açık bir değiştirme eylemi yaptığınızda değişmesi

    • Açıkçası bunun bug olduğunu düşünmüyorum. Tüm örnekler epey sık aralıklı ve tutamaç, track’in birden fazla adımını kaplıyor
      Firefox bu tıklamaları track’e doğrudan tıklanmış gibi yorumluyor. Bu kütüphane buna hiç müdahale etmiyor; bu yalnızca Firefox’un çalışma biçimi

  • Klavye ile çalışması harika. Doğru çalışıyor; Shift-Tab’e basılı tutarsanız geriye de gidebiliyorsunuz
    Gerçekten iyi yapılmış; çok küçük bir ayrıntı ama bu etkileşimi doğru uyguladığınız için teşekkürler

  • Bizim şirketin tasarım sisteminde de bir stajyer buna benzer yan yana yerleştirilmiş bir kavram kanıtı yapmıştı; ama input’lardan birinin pikselleri sürekli hafifçe zıplıyordu ve sonunda düzgün yapamadı
    Bu yüzden ikinci bir stajyer üst üste bindirilmiş 2 input range kullanan bir çözüm ortaya koydu

  • Aralık girişi gerektiğinde hep jQuery UI slider kullanıyordum ve tek bir slider için sayfaya jQuery ile jQuery UI eklemek zorunda kalıyordum. Bu gerçekten güzel
    Düzenleme: ESM modülü yerine doğrudan kullanılabilecek normal bir JS dosyasını önceden oluşturma ihtimali var mı?

  • Bug’ı burada bildirmek uygun mu bilmiyorum. İlk iki örnekteki tutamaçlar dokunma etkileşimini yakalayıp kaydırmayı engelliyor. Sonraki üç örnekte böyle değil
    Bunun yan etkisi olarak parmağın altındaki etiketi görünür kılmak için yukarı sürükleyemiyorsunuz; sayfa kayıyor ve etiket parmağın altında kalmaya devam ediyor

    • Yeniden üretebiliyorsanız bir GitHub issue’su açmanız iyi olur [1]
      Hangi tarayıcı ve işletim sistemini kullandığınızı merak ediyorum. Bu kütüphane native input kullandığı için kaydırmayı engelleme konusunda hiçbir şey yapmıyor
      iOS telefonumda, stil uygulanmış olsun olmasın, tüm input[type=range] öğelerinde kaydırma engelleniyor
      [1] https://github.com/Stanko/dual-range-input/issues

  • “Native” kısmı tartışmaya açık. Kütüphanenin iki native HTML range input kullandığı, bu yüzden native etkileşim ve erişilebilirlik özelliklerinin korunduğu söyleniyor; ama benim ölçütüm net
    Amaçlandığı gibi çalışması için JavaScript gerekiyorsa artık native değildir

    • Katılıyorum. Genelde de böyle kullanılmıyor mu diye düşünüyorum
      Yine de yazarın ne demek istediğini anlıyorum. JS ile hareket eden bir div yığını doğrudan uygulamak yerine normal slider’ları birleştirdiği için native çözüme çok daha yakın. Akıllı CSS JavaScript’in yerini alamıyorsa, muhtemelen mümkün olan en yakın yol bu
      Native olup olmamasından bağımsız olarak, böyle bir widget kullanılabilir olduğunda çok faydalı ve bu alanda uygulama eksikliği vardı
    • Genelde öyle, ama tamamen keskin bir ayrım da değil. Öğe native olabilir; ancak modal durumda açmak için JavaScript kullanmak gerekebilir
      popover özelliği çıkmadan önce JavaScript olmadan hiç açılamıyordu
      Ayrıca form doğrulama gibi tarayıcının iç doğrulama araçlarını hiç kullanmayan kütüphanelerden ayrı değerlendirmeye değer native vanilla JavaScript yöntemleri de var

  • https://spodj.intermer.net/ sitesini yaparken böyle bir şey arıyordum
    İhtiyacım olan işlevi elde etmek için React’i beceriksizce kullanmak zorunda kaldım; frontend geliştirmede iyi olmadığım için böyle oldu