Schieberegler

Übersicht

Die Avonni-Slider-Komponente ermöglicht es Benutzern, einen einzelnen numerischen Wert oder einen Bereich auszuwählen, indem sie Griffe entlang einer Schiene ziehen. Sie ist ideal für Szenarien, in denen eine visuelle Skala intuitiver ist als das Eingeben von Zahlen und bietet eine taktile und ansprechende Eingabemethode.

Hauptmerkmale

• Einzel- oder Bereichsmodus: Wählen Sie einen Wert oder definieren Sie einen Start-/Endbereich.

• Visuelle Skala: Zeigt Minimum, Maximum und Schritte zur klaren Orientierung an.

• Anpassung: Richten Sie Orientierung, Größe, Teilstriche, Pins und Einheiten ein.

• Interaktivität: Ziehen Sie die Griffe für präzise Steuerung.

Anwendungsfälle

• Wählen Sie einen Preis oder einen Budgetbereich.

• Wählen Sie Prozentsätze (z. B. Rabatte oder Fortschrittsgrade).

• Legen Sie Mengen oder numerische Präferenzen fest.

• Geben Sie Bewertungen auf benutzerdefinierten Skalen ein.

• Filtern Sie Daten nach numerischen Bereichen (z. B. im Bereichsmodus).

Konfiguration

Wählen Sie die Slider-Komponente auf der Leinwand aus, um ihre Eigenschaften im rechten Eigenschaftenfeld anzuzeigen.

Grundlegende Eigenschaften

Diese identifizieren und beschriften Griffe.

Eigenschaft	Typ	Beschreibung	Beispiel
API-Namen	Text	Eindeutiger Bezeichner für die Komponenteninstanz.	PriceSlider
Beschriftung	Text	Hauptbeschriftung, die den Benutzern angezeigt wird.	"Preis auswählen:"
Feldhilfetext	Text (Optional)	Zusätzlicher Kontext oder Anweisungen.	"Ziehen, um das Budget festzulegen."

Kernfunktionalität & Datenbindung

Diese definieren den Auswahlmodus und die Datenerfassung.

Eigenschaft	Typ/Bedingung	Beschreibung
Mehrere Werte	Boolean (Kontrollkästchen)	Aus: Einzelwertauswahl (Standard). Ein: Bereichsauswahl mit zwei Griffen.
Wert	Variablenbindung	Einzelmodus: An Number-Variable binden. Bereichsmodus: An Number-Collection-Variable binden (Index 0 = min, 1 = max). Tipp: Vorbefüllen für Standardwerte.
Min	Zahl	Minimaler Wert auf der Schiene.
Max	Zahl	Maximaler Wert auf der Schiene.
Schritt	Zahl	Inkrement zwischen auswählbaren Werten (z. B. 1 für ganze Zahlen, 0,5 für Halbe).
Typ	Wählen Sie	Orientierung: horizontal (Standard) oder vertikal.

Beste Praxis: Stellen Sie sicher, dass Min < Max und dass Step zur Skala passt, um Usability-Probleme zu vermeiden.

Aussehen & Anzeige

Diese steuern den visuellen Stil.

Eigenschaft	Typ/Bedingung	Beschreibung	Optionen/Beispiele
Variante	Wählen Sie	Beschriftungsstil und -position.	standard (oben), label-hidden.
Größe	Wählen Sie	Gesamtgröße der Komponente.	x-small, small, medium (Standard), large, responsive.
Einheiten	Auswählen/Text	Fügt Werten Einheiten hinzu (z. B. Währung, Prozent oder benutzerdefiniert wie "kg").	percent, currency, "hours".
Min/Max-Werte ausblenden	Boolean (Kontrollkästchen)	Blendet Min-/Max-Beschriftungen an den Schienenenden aus.	-
Schiene ausblenden	Boolean (Kontrollkästchen)	Macht die Schiene unsichtbar (nur Griffe).	-
Pin anzeigen	Boolean (Kontrollkästchen)	Zeigt während des Ziehens ein Tooltip mit dem aktuellen Wert an.	Empfohlen für Präzision.
Teilstriche anzeigen	Boolean (Kontrollkästchen)	Fügt basierend auf Step Markierungen entlang der Schiene hinzu.	-
Stil der Teilstriche	Auswählen (wenn Teilstriche aktiviert sind)	Erscheinungsbild der Teilstriche.	inner-tick, tick, dot.

Tipp

Aktivieren Sie "Show Pin" für besseres Feedback, besonders auf Mobilgeräten.

Verhaltens-Eigenschaften

Diese steuern Interaktivität und Zustand.

Eigenschaft	Typ	Beschreibung
Deaktiviert	Boolean	Deaktiviert alle Interaktionen.
Schreibgeschützt	Boolean	Verhindert Änderungen, bleibt aber sichtbar.
Tausch deaktivieren	Boolean (nur im Bereichsmodus)	Verhindert, dass der Min-Griff den Max-Griff überquert (erhält die Reihenfolge).
Erforderlich	Boolean	Erfordert eine Auswahl; mit Formularvalidierung verwenden.
Sichtbar	Boolean	Schaltet die Anzeige um; an Boolean-Variable für dynamisches Verhalten binden.

Beispiele

Slider für Einzelwert: Auswahl eines Rabattprozentsatzes

1

Slider-Komponente hinzufügen

• API-Namen: discountSlider (wird später zur Referenzierung des Value-Attributs verwendet)

• Beschriftung: "Rabattprozentsatz:"

• Mehrere Werte: Aus

• Min: 0

• Max: 100

• Schritt: 5

• Einheiten: percent

• Pin anzeigen: Ein

2

Verwenden Sie den Wert

Berechnen Sie in einer Formelressource (oder anderswo, z. B. in Interaktionen) den reduzierten Preis mit $Component.discountSlider.Value (dies greift direkt auf den vom Slider ausgewählten Wert zu).

Benutzer ziehen den Griff, um einen Prozentsatz auszuwählen; der Wert ist sofort über das Komponentenattribut für Berechnungen oder Aktualisierungen verfügbar.

---

Wesentliche Überlegungen

• Wesentliches zur Bindung: Passen Sie die Value-Bindung an den Modus an (Number für Einzel-, Collection für Bereichsmodus), um Auswahlen korrekt zu erfassen.

• Skalenlogik: Testen Sie Min, Max und Step für intuitive Schritte; kleine Steps über große Bereiche können träge wirken.

• Nuancen im Bereichsmodus: Verwenden Sie Disable Swap, um min ≤ max durchzusetzen.

• Einheitenformatierung: Konfigurieren Sie Dezimalstellen oder Locale-Einstellungen in zugehörigen Einstellungen für eine gepflegte Anzeige.

• Barrierefreiheit: Aktivieren Sie Pins und Teilstriche; stellen Sie sicher, dass die Tastaturnavigation für alle Benutzer funktioniert.

---

Fehlerbehebung bei häufigen Problemen

• Überlappende Griffe: Schalten Sie im Bereichsmodus Disable Swap ein, wenn unbeabsichtigte Tausche auftreten.

• Leistungsprobleme: Bei feinen Steps (z. B. 0,01) begrenzen Sie den Max-Min-Bereich, um die Rendering-Belastung zu reduzieren.

• Anzeigeprobleme: Wenn Einheiten nicht angezeigt werden, überprüfen Sie die Organisationseinstellungen für Währungs-/Prozentformate.

---

Zusammenfassung

Die Avonni-Slider-Komponente bietet eine ansprechende Möglichkeit, numerische Eingaben oder Bereiche in Salesforce-Oberflächen zu verwalten. Mit robuster Bindung und Anpassbarkeit ist sie vielseitig für Formulare, Filter und mehr. Für Integrationen siehe Avonni Data Table- oder Variables-Leitfaden.