InputRange

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Slider

Description: The InputRange component creates an interactive control for selecting a numeric value within a defined range. The value is adjusted by moving a slider or using arrow keys.

Example

Rendering of an InputRange component with default settings:

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

Accessibility

• The label is required via the _label attribute and is correctly read by assistive technologies.
• The current value is communicated to the component as aria-valuenow.
• Minimum and maximum are communicated via aria-valuemin and aria-valuemax.
• The slider is fully operable via keyboard.
• Hint texts via _hint are recognized by screen readers.
• Error messages via _msg are read aloud by assistive technologies.

Links and References

Usage

Keyboard Controls

Key	Function
Tab	Focuses the input field.
Arrow right	Increases the value.
Arrow left	Decreases the value.
Arrow up	Increases the value.
Arrow down	Decreases the value.
Home	Jumps to the minimum value.
End	Jumps to the maximum value.

Best Practices / Recommendations

• Use meaningful labels via _label to make the slider's purpose clear.
• Set _min and _max to conceptually meaningful values. The default values are _min="0" and _max="100".
• Use _step to define larger or smaller step sizes (e.g., _step="5" for steps of 5).
• Provide hints about the meaning of minimum and maximum values via _hint.
• Combine the InputRange with a text display of the current value to improve usability.
• Make sure _name is set so that the data is sent when the form is submitted.

Use Cases

• Volume control in multimedia applications
• Brightness or contrast adjustment
• Age filtering, price range selection in search forms
• Threshold setting in administration interfaces
• Scaling or zoom control
• Weighting or value setting in rating systems

Construction / Technology

Playground

Test the various properties of the InputRange component:

Icons

Message

<KolInputRange _label="Value Range" _max={100} _min={0} _step={1} _value={50} />

Functionality (with Code)

Basic Configuration

Standard InputRange with label, minimum, and maximum:

<KolInputRange _label="Select value" _max={100} _min={0} _step={1} _value={50} />

Value Range and Step Size

The properties _min, _max, and _step determine the value range and step size:

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

Hint Texts

Additional information can be provided via _hint:

<KolInputRange _hint="Slider to control the volume (0-100%)" _label="Volume" _max={100} _min={0} _step={1} _value={50} />

Disabled State

A disabled input field can be achieved via the _disabled attribute:

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

Error Messages

The _msg attribute allows displaying validation hints:

Message

<KolInputRange _label="Value range" _max={100} _min={0} _msg={{"_description":"The value must be between 10 and 90","_level":"error"}} _step={1} _value={5} />

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

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

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
_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" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _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

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

Slot	Description
	The label of the input field.

---