Zum Hauptinhalt springen

InputRange

Der Input-Typ Range erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.

Konstruktion

Code

<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>

Beispiel

Wertebereich

Verwendung

Best practices

  • Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert das Eingabefeld.
Pfeil-TastenVerändern den Wert der Range-Komponente.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.string | undefinedundefined
_alert_alertGibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.boolean | undefinedtrue
_autoComplete_auto-completeGibt an, ob das Eingabefeld autovervollständigt werden kann."off" | "on" | undefinedundefined
_disabled_disabledSetzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.boolean | undefinedundefined
_error_errorGibt den Text für eine Fehlermeldung an.string | undefinedundefined
_hideLabel_hide-labelVersteckt das sichtbare Label des Elements.boolean | undefinedundefined
_hint_hintGibt den Hinweistext an.string | undefined''
_icon_iconErmöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idGibt die technische ID des Eingabefeldes an.string | undefinedundefined
_list_listGibt die Liste der Vorschlagswörter an.Option<number>[] | string | undefinedundefined
_max_maxGibt den Maximalwert des Eingabefeldes an.number | undefinedundefined
_min_minGibt den Minimalwert des Eingabefeldes an.number | undefinedundefined
_name_nameGibt den technischen Namen des Eingabefeldes an.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_step_stepGibt die Schrittweite der Wertveränderung an.number | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index dieses Input hat.number | undefinedundefined
_touched_touchedGibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.boolean | undefinedfalse
_value_valueGibt den Wert des Eingabefeldes an.number | undefinedundefined

Slots

SlotDescription
Die Beschriftung des Eingabeelements.

Dependencies

Depends on

  • kol-input

Graph


Live-Editor

Beispiele