InputRange

#InputRange

Synonyms: Slider

The Range input type creates an interactive element that allows values ​​to be changed by moving a slider.

Construction

Code

<kol-input-range
 _label="Wertebereich"
 _min="100"
 _max="200"
 _value="100"
 _step="20"
 _icons='{"left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'
></kol-input-range>

Events

For the handling of events or callbacks, see .

Event	trigger	Value
click	Input field is clicked	-
focus	Input field is focused	-
blur	Input field loses focus	-
input	Value is changed by entering	Current value of the input field
change	Entry has been completed	Current value of the input field

Example

Usage

Best practices

• Make sure to set id and name correctly so that the data is sent when you submit the form.

Accessibility

Keyboard controls

button	Function
Tab	Focuses the input field.
arrow keys	Change the value of the range component.

Links and references

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the key combination that can be used to trigger or focus the component's interactive element.	string | undefined	undefined
_autoComplete	_auto-complete	Defines whether the input can be auto-completed.	string | undefined	'off'
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hideLabel	_hide-label	Hides 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 | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_icons	_icons	Defines the icon classnames (e.g. _icons="fa-solid fa-user").	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_id	_id	[DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element.	string | undefined	undefined
_label (required)	_label	Defines 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.	string	undefined
_max	_max	Defines the maximum value of the element.	`${number}.${number}` | `${number}` | number | undefined	100
_min	_min	Defines the smallest possible input value.	`${number}.${number}` | `${number}` | number | undefined	0
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _description: string; } | string | undefined	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_shortKey	_short-key	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	string | undefined	undefined
_step	_step	Defines the step size for value changes.	`${number}.${number}` | `${number}` | number | undefined	undefined
_suggestions	_suggestions	Suggestions to provide for the input.	W3CInputValue[] | string | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_value	_value	Defines the value of the element.	`${number}.${number}` | `${number}` | number | undefined	undefined

Methods

getValue

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

Returns the current value.

Returns

Type: Promise<number | NumberString | undefined>

kolFocus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
	Die Beschriftung des Eingabeelements.

---

Usage _msg

Case	_msg-Value
No message	undefined
Default error message	string
Message	{_type: 'success', _description: 'Success message'}

View example

Live editor

Examples