Range
<ahi-range> | AhiRange
A range is an input field that users can use to select a numeric value within a given range (minimum and maximum values).
<ahi-range label="Volume" min="0" max="100"></ahi-range>
This component works with standard <form> elements. Please refer to the section on
form controls to learn
more about form submission and client-side validation.
Examples
Help text
Add descriptive help text to a range with the help-text attribute. For help texts that contain
HTML, use the help-text slot instead.
<ahi-range label="Volume" help-text="Controls the volume of your microphone." min="0" max="100"></ahi-range>
Min, max, and step
Use the min and max attributes to set the range’s minimum and maximum values,
respectively. The step attribute determines the value’s interval when increasing and
decreasing.
<ahi-range label="Volume" min="0" max="10" step="1"></ahi-range>
Disabled
Use the disabled attribute to disable a slider.
<ahi-range label="Disabled range" disabled></ahi-range>
Tooltip placement
By default, the tooltip is shown on top. Set tooltip to bottom to show it below
the slider.
<ahi-range label="Tooltip on bottom" tooltip="bottom"></ahi-range>
Disable the tooltip
To disable the tooltip, set tooltip to none.
<ahi-range label="No tooltip" tooltip="none"></ahi-range>
Custom tooltip formatter
You can change the tooltip’s content by setting the tooltipFormatter property to a function
that accepts the range’s value as an argument.
<ahi-range label="Custom formatter" min="0" max="100" step="1" class="range-with-custom-formatter"></ahi-range>
<script>
const range = document.querySelector('.range-with-custom-formatter');
range.tooltipFormatter = value => `Total - ${value}%`;
</script>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/range/range.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/range/range.js';Slots
| Name | Description |
|---|---|
label
|
The range’s label. Alternatively, you can use the label attribute. |
help-text
|
Text that describes how to use the input. Alternatively, you can use the
help-text attribute.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
name
|
The name of the range, submitted as a name/value pair with form data. |
string
|
''
|
|
value
|
The current value of the range, submitted as a name/value pair with form data. |
number
|
0
|
|
label
|
The range’s label. If you need to display HTML, use the label slot instead. |
string
|
''
|
|
helpText
help-text
|
The range’s help text. If you need to display HTML, use the help-text slot instead. |
string
|
''
|
|
disabled
|
Disables the range. |
boolean
|
false
|
|
min
|
The minimum acceptable value of the range. |
number
|
0
|
|
max
|
The maximum acceptable value of the range. |
number
|
100
|
|
step
|
The interval at which the range will increase and decrease. |
number
|
1
|
|
tooltip
|
The preferred placement of the range’s tooltip. |
'top' | 'bottom' | 'none'
|
'top'
|
|
tooltipFormatter
|
A function used to format the tooltip’s value. The range’s value is passed as the first and only argument. The function should return a string to display in the tooltip. |
(value: number) => string
|
- | |
defaultValue
|
The default value of the form control. Primarily used for resetting the form control. |
number
|
0
|
|
validity
|
Gets the validity state object | - | - | |
validationMessage
|
Gets the validation message | - | - | |
formId
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of a
form and associate it with the form that has this id. The form must be in the same
document or shadow root for this to work.
|
string
|
''
|
|
form
|
The form the control is associated with, following the native form-control contract: reading returns
the associated <form> element (or null if there is none), assigning
takes a form id — assign an empty string to restore association with the nearest containing form.
|
HTMLFormElement | null
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-blur |
Emitted when the control loses focus. | - |
ahi-change |
Emitted when an alteration to the control’s value is committed by the user. | - |
ahi-focus |
Emitted when the control gains focus. | - |
ahi-input |
Emitted when the control receives input. | - |
ahi-invalid |
Emitted when the form control has been checked for validity and its constraints aren’t satisfied. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Sets focus on the range. |
options: FocusOptions
|
blur() |
Removes focus from the range. | - |
stepUp() |
Increments the value of the range by the value of the step attribute. | - |
stepDown() |
Decrements the value of the range by the value of the step attribute. | - |
checkValidity() |
Checks for validity but does not show a validation message. Returns true when valid and
false when invalid.
|
- |
reportValidity() |
Checks for validity and shows the browser’s validation message if the control is invalid. | - |
setCustomValidity() |
Sets a custom validation message. Pass an empty string to restore validity. |
message: string
|
resetValidity() |
Hides validity again, returning the control to its pristine state: it stops matching
:user-invalid and drops its error styling until the user next interacts with it. The
value and the validity are both untouched — an empty required control is still invalid and still
blocks submission. This only changes whether that invalidity is shown. Interaction state
otherwise has exactly one automatic exit, form.reset(). Call this when the application
replaces a value itself and the old error no longer describes anything the user did: loading a
draft, switching which record is being edited, or clearing a filter row.
|
- |
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--thumb-size |
The size of the thumb. | |
--tooltip-offset |
The vertical distance the tooltip is offset from the track. | |
--track-color-active |
The color of the portion of the track that represents the current value. | |
--track-color-inactive |
The of the portion of the track that represents the remaining value. | |
--track-height |
The height of the track. | |
--track-active-offset |
The point of origin of the active track. |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
form-control |
The form control that wraps the label, input, and help text. |
form-control-label |
The label’s wrapper. |
form-control-input |
The range’s wrapper. |
form-control-help-text |
The help text’s wrapper. |
base |
Deprecated. Use the range part instead. |
range |
The component’s outer wrapper. |
input |
The internal <input> element. |
tooltip |
The range’s tooltip. |
Learn more about customizing CSS parts.