Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Eingabefelder

Elastic tug slider

Elastic tug slider: Ein Schieber, der sich wie ein Gummiband dehnt, wenn er über seine Enden gezogen wird, und den Track nach dem Loslassen mit einem Sprung zurückschnappt.

Elastic tug slider verwenden

Elastic tug slider verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
valuenumber50Von 0 bis 100; Schrittweite 1
steppedbooleanfalseKeine weitere Grenze in den Metadaten.
accentcolor#F5C542Keine weitere Grenze in den Metadaten.
Für welche Frameworks ist Elastic tug slider verfügbar?

Elastic tug slider ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Elastic tug slider?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Elastic tug slider erkennbar?

Der React-Quellcode von Elastic tug slider enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, onKeyDown, tabIndex); explizite Rollen (slider); Tastenvergleiche (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, PageDown, PageUp). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Elastic tug slider reduzierte Bewegung?

Elastic tug slider liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduced ? { stiffness: 700, damping: 44 } : { stiffness: 240, damping: 13 }. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Single value slider von Fieldbook aus der Kategorie Eingabefelder.
2791Single value sliderEingabefelderEin horizontaler Schieberegler mit einem verschiebbaren Daumen, der die Spur dahinter ausfüllt, sodass der aktuelle Wert auf einen Blick ablesbar ist.
Standbild der UI-Komponente Vertical brightness slider von Fieldbook aus der Kategorie Eingabefelder.
2788Vertical brightness sliderEingabefelderEin hoher Pillenschieber, der sich beim Ziehen von unten mit Licht füllt, über beide Enden hinweg Widerstand leistet und beim Loslassen zurückspringt.
Standbild der UI-Komponente Auto Grow Textarea von Fieldbook aus der Kategorie Eingabefelder.
2792Auto Grow TextareaEingabefelderEin mehrzeiliges Textfeld, das größer wird, wenn die Person mehr tippt, anstatt in einem festen Feld zu scrollen.
Standbild der UI-Komponente Character budget counter von Fieldbook aus der Kategorie Eingabefelder.
2760Character budget counterEingabefelderEin Schreibfeld mit einer Anzeige für die verbleibenden Zeichen, die auf eine Feder schlägt und sich in der Farbe erwärmt, wenn das Budget aufgebraucht ist.
Standbild der UI-Komponente Focus ring text input von Fieldbook aus der Kategorie Eingabefelder.
2356Focus ring text inputEingabefelderEin einzeiliges Textfeld mit einem gedämpften Platzhalter und einem durchgehenden Akzentring, der nur bei Fokus angezeigt wird.
Standbild der UI-Komponente Natural Language Date Field von Fieldbook aus der Kategorie Eingabefelder.
2389Natural Language Date FieldEingabefelderEin Textfeld, das Sätze wie „in 2 Tagen“ oder „nächsten Freitag“ als echtes Datum liest, mit einem Kalender-Popover und einem Live-Vorschausatz darunter.