Native Eingabe mit doppeltem Bereich

• @stanko/dual-range-input ist eine native Dual-Range-Input-Bibliothek, die zwei native HTML-Range-Inputs verwendet.
  • Durch die Verwendung nativer Inputs bleiben alle grundlegenden Interaktionen und Accessibility-Funktionen erhalten.
  • Sie besteht aus ungefähr 50 Zeilen JavaScript und CSS.
• Warum das nötig ist
  • Verwendet wird eine UI zum Anpassen von Parametern in einem generativen Zeichenwerkzeug, wofür ein Minimum- und ein Maximum-Slider benötigt werden.
  • Bestehende Lösungen sind auf JavaScript angewiesen und implementieren Drag- und Accessibility-Funktionen neu.
  • Es sollen native HTML-Range-Inputs verwendet werden, und beim Klick auf den Track soll sich der nähere Slider auf diesen Wert bewegen.
• Funktionsweise
  • Zwei Inputs werden nebeneinander platziert; wenn sich ein Input ändert, wird der Mittelpunkt der beiden Werte berechnet.
  • Minimum- und Maximum-Attribute werden auf diesen Mittelpunkt gesetzt, und die Breite der Inputs wird aktualisiert.
• Anpassen der Input-Größe
  • Bei der Berechnung der Input-Breite muss berücksichtigt werden, dass der Track kürzer ist als die tatsächliche Breite des Inputs.
  • Das wird einfach berechnet, indem zur Breite des Inputs die Thumb-Breite addiert wird.
  • Dem Input-Wrapper wird Padding hinzugefügt, um die zusätzliche Breite des Thumbs aufzunehmen.
• Thumb-Bewegung beim Klicken
  • Die Inputs werden so skaliert, dass sie sich am Mittelpunkt treffen; beim Klicken bewegt sich der nähere Thumb auf den entsprechenden Wert.
  • Wenn der Debug-Modus aktiviert wird, lässt sich der Mittelpunkt leicht erkennen.
• Styling
  • Range-Inputs lassen sich mit CSS stylen.
  • Das Styling von Track und Thumb ist einfach; am mittleren Verbindungsstück des Tracks wird der Border-Radius entfernt.
• Theming
  • Mehrere Variablen werden offengelegt, damit sich Themes leicht ändern lassen.
  • Es gibt Standardwerte, und durch das Überschreiben der Variablen lassen sich Themes erstellen.
• Gradienten
  • Mit CSS-Gradienten wird der ausgewählte Bereich eingefärbt.
  • Der Gradient wird über die Variable --dri-gradient-position gesetzt und im Code zusammen mit der Breite aktualisiert.
• Fazit
  • Dieser Beitrag dient dazu, Gedanken zu ordnen, und soll dazu inspirieren, native Elemente auszuprobieren.

[GN⁺]

Hacker-News-Kommentare

• Der mittlere Bereich des Sliders sollte immer beweglich sein, und wie im Unity-Beispiel sollten sich beide Griffe gleichzeitig bewegen lassen.
• Der Autor hat den Slider für seine generativen Bilder erstellt und zieht es vor, den Slider zu ziehen und die Bildveränderungen zu sehen, statt Zahlen einzugeben.
• Es gibt einen Bug, bei dem man den Slider nach dem Setzen auf 100-100 nicht auf 99-99 ändern kann; dieses Problem tritt leicht an den Enden des Sliders auf.
• Es wird angenommen, dass HTML <input type=range> eine Implementierung für zwei Werte benötigt, und in Firefox gibt es einen Bug, bei dem sich der Wert beim Klicken auf den Griff schrittweise ändert.
• Im Designsystem des Unternehmens hat ein Praktikant ein ähnliches POC erstellt, doch es trat ein Problem mit springenden Eingabewerten auf, woraufhin ein anderer Praktikant eine Lösung mit überlappenden Eingabebereichen vorgeschlagen hat.
• Der Begriff „nativ“ ist diskutabel, und wenn JavaScript erforderlich ist, ist es nach dieser Auffassung nicht mehr nativ.
• Für die Implementierung einer bestimmten Funktion wurde React verwendet, aber wegen mangelnder Erfahrung in der Frontend-Entwicklung gab es Schwierigkeiten.
• Es wurde der jQuery-UI-Slider verwendet, aber dafür mussten jQuery und jQuery UI nur für einen einzelnen Slider hinzugefügt werden.
• Es kann auch ohne JavaScript funktionieren; man müsste nur die Breitenberechnung in CSS ausgefeilter von den Slider-Werten abhängig machen.
• Es ist fraglich, ob dies der richtige Ort für Bug-Reports ist, und bei den ersten beiden Beispielen blockieren die Griffe die Touch-Interaktion und behindern dadurch das Scrollen.