Zum Hauptinhalt springen

Ihre Meinung ist uns wichtig! Gemeinsam mit Ihnen möchten wir KoliBri stetig verbessern. Teilen Sie uns Ihre Ideen, Wünsche oder Anregungen mit – schnell und unkompliziert.

InputRange

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.
Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Slider

Beschreibung: Die InputRange-Komponente erzeugt ein interaktives Steuerelement zum Wählen eines numerischen Wertes innerhalb eines definierten Bereichs. Der Wert wird durch Verschieben eines Reglers oder Pfeiltasten angepasst.

Beispiel​

Darstellung einer InputRange-Komponente mit Standardausstattung:

<KolInputRange _label="Lautstärke" _max={100} _min={0} _step={1} _value={50} />

Barrierefreiheit​

  • Das Label ist über das Attribut _label erforderlich und wird von assistiven Technologien korrekt gelesen.
  • Der aktuelle Wert wird der Komponente als aria-valuenow mitgeteilt.
  • Minimum und Maximum werden über aria-valuemin und aria-valuemax kommuniziert.
  • Der Schieberegler ist vollständig über die Tastatur bedienbar.
  • Hinweistexte über _hint werden von Screenreadern erkannt.
  • Fehlermeldungen über _msg werden von assistiven Technologien vorgelesen.

Verwendung​

Tastatursteuerung​

TasteFunktion
TabFokussiert das Eingabefeld.
Pfeil rechtsErhöht den Wert.
Pfeil linksErniedrigt den Wert.
Pfeil obenErhöht den Wert.
Pfeil untenErniedrigt den Wert.
Pos1Springt zum Minimumwert.
EndeSpringt zum Maximumwert.

Best Practices / Empfehlungen​

  • Verwenden Sie aussagekräftige Beschriftungen über _label, um die Funktion des Schiebereglers deutlich zu machen.
  • Setzen Sie _min und _max konzeptionell sinnvoll. Die Standardwerte sind _min="0" und _max="100".
  • Nutzen Sie _step, um größere oder kleinere Schrittweiten zu definieren (z.B. _step="5" für 5er-Schritte).
  • Geben Sie Hinweise über die Bedeutung von Minimal- und Maximalwert via _hint.
  • Kombinieren Sie die InputRange mit einer Textanzeige des aktuellen Wertes, um die Bedienbarkeit zu verbessern.
  • Achten Sie darauf, dass _name gesetzt ist, damit die Daten beim Formularversand mitgesendet werden.

Anwendungsfälle​

  • Lautstärkeregelung in Multimedia-Anwendungen
  • Helligkeits- oder Kontrastanpassung
  • Altersfiltration, Preisbereichswahl in Suchformularen
  • Schwellenwerteinstellung in Verwaltungsoberflächen
  • Skalierung oder Zoom-Kontrolle
  • Gewichtung oder Wertfestlegung in Bewertungssystemen

Konstruktion / Technik​

Playground​

Testen Sie die verschiedenen Eigenschaften der InputRange-Komponente:

Icons
Message
<KolInputRange _label="Wertebereich" _max={100} _min={0} _step={1} _value={50} />

Funktionalitäten (mit Code)​

Basis-Konfiguration​

Standard-InputRange mit Beschriftung, Minimum und Maximum:

<KolInputRange _label="Wert auswählen" _max={100} _min={0} _step={1} _value={50} />

Wertbereich und Schrittweite​

Die Eigenschaften _min, _max und _step bestimmen den Wertebereich und die Schrittweite:

<KolInputRange _label="Preisspanne (€)" _max={1000} _min={0} _step={50} _value={250} />

Hinweistexte​

Zusätzliche Informationen können über _hint bereitgestellt werden:

<KolInputRange _hint="Schieberegler um die Lautstärke zu regulieren (0-100%)" _label="Lautstärke" _max={100} _min={0} _step={1} _value={50} />

Deaktivierter Zustand​

Ein deaktiviertes Eingabefeld kann über das Attribut _disabled erreicht werden:

<KolInputRange _disabled={true} _label="Deaktiviertes Feld" _max={100} _min={0} _step={1} _value={50} />

Fehlermeldungen​

Das Attribut _msg erlaubt die Anzeige von Validierungshinweisen:

Message
<KolInputRange _label="Wertbereich" _max={100} _min={0} _msg={{"_description":"Der Wert muss zwischen 10 und 90 liegen","_level":"error"}} _step={1} _value={5} />

Events​

Zur Behandlung von Events bzw. Callbacks siehe .

EventAuslöserValue
clickEingabefeld wird angeklickt-
focusEingabefeld wird fokussiert-
blurEingabefeld verliert Fokus-
inputWert wird durch Eingabe geändertAktueller Wert des Eingabefelds
changeEingabe wurde abgeschlossenAktueller Wert des Eingabefelds

API​

Overview​

The Range input type creates a slider control for selecting a numeric value within a defined range. Use the _min, _max, and _step properties to configure the range and step size.

Properties​

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines the key combination that can be used to trigger or focus the component's interactive element.string | undefinedundefined
_autoComplete_auto-completeDefines whether the input can be auto-completed.string | undefined'off'
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_hideMsg_hide-msgHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.stringundefined
_max_maxDefines the maximum value of the element.`${number}.${number}` | `${number}` | number | undefined100
_min_minDefines the smallest possible input value.`${number}.${number}` | `${number}` | number | undefined0
_msg_msgDefines the properties for a message rendered as Alert component.Omit<AlertProps, "_on" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _description: string; } | string | undefinedundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefinedundefined
_shortKey_short-keyAdds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.string | undefinedundefined
_step_stepDefines the step size for value changes.`${number}.${number}` | `${number}` | number | undefinedundefined
_suggestions_suggestionsSuggestions to provide for the input.W3CInputValue[] | string | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the element.`${number}.${number}` | `${number}` | number | undefinedundefined

Methods​

click​

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns​

Type: Promise<void>

focus() => Promise<void>​

Sets focus on the internal element.

Returns​

Type: Promise<void>

getValue() => Promise<number | NumberString | undefined>​

Returns the current value.

Returns​

Type: Promise<number | NumberString | undefined>

Slots​

SlotDescription
The label of the input field.