RangeSlider
The Range Slider component allows users to select a range from a series of values.
Usage
Import the component:
import 'mdui/components/range-slider.js';
Import the TypeScript type:
import type { RangeSlider } from 'mdui/components/range-slider.js';
Example:
<mdui-range-slider></mdui-range-slider>
Examples
Default Value
The value
property represents the current value of the range slider. You can set the range slider's value by updating the value
property. Note that the value
property is an array and can only be accessed and modified through JavaScript property.
Disabled State
The range slider can be disabled by adding the disabled
attribute.
Range
The min
and max
attributes allow you to set the minimum and maximum values of the range slider.
Step Interval
The step
attribute defines the interval of the range slider.
Tickmarks
Tickmarks can be displayed on the range slider by adding the tickmarks
attribute.
Hide Tooltip
The tooltip on the range slider can be hidden by adding the nolabel
attribute.
Modify Tooltip
The labelFormatter
property allows you to customize the display format of the tooltip. This property is a function that takes the current value of the range slider as a parameter and returns the text you want to display.
API
Properties
Attribute | Property | Reflect | Type | Default |
---|---|---|---|---|
defaultValue | number[] | [] | ||
Specifies the default value. Resets to this state when the form is reset. This value can only be set via JavaScript property. | ||||
value | number[] | - | ||
Specifies the slider value in array format. This value is submitted with form data. It can't be set with HTML attributes initially, only via JavaScript property. | ||||
autofocus | autofocus | boolean | false | |
Determines if the element should be focused when the page loads. | ||||
tabindex | tabIndex | number | - | |
Specifies the order in which the element receives focus when navigating with the Tab key. | ||||
min | min | number | 0 | |
Specifies the minimum value. Default is | ||||
max | max | number | 100 | |
Specifies the maximum value. Default is | ||||
step | step | number | 1 | |
Specifies the step interval. Default is | ||||
tickmarks | tickmarks | boolean | false | |
Adds tickmarks to the slider. | ||||
nolabel | nolabel | boolean | false | |
Hides the tooltip. | ||||
disabled | disabled | boolean | false | |
Disables the slider. | ||||
form | form | string | - | |
Associates the slider with a This attribute allows slider elements to be associated with | ||||
name | name | string | '' | |
Specifies the slider's name, which is submitted with the form data. | ||||
validity | ValidityState | - | ||
A | ||||
validationMessage | string | - | ||
The element's validation message. This is empty if the element meets its constraints. | ||||
labelFormatter | (value: number) => string | - | ||
Specifies a function to format the tooltip's value. The function should take the slider's value as an argument and return a string to display in the tooltip. |
Methods
Name | Parameters | Returns |
---|---|---|
click | void | |
Simulates a mouse click on the element. | ||
focus |
| void |
Sets focus on the element. An optional parameter can be an object with a | ||
blur | void | |
Removes focus from the element. | ||
checkValidity | boolean | |
Checks the validity of the form field. If it's invalid, it triggers an | ||
reportValidity | boolean | |
Checks the validity of the form field. If it's invalid, it triggers an | ||
setCustomValidity |
| void |
Sets a custom error message. If the text is non-empty, it indicates that the field is invalid. |
Events
Name |
---|
focus |
Emitted when the range slider gains focus. |
blur |
Emitted when the range slider loses focus. |
change |
Emitted when the value changes and the range slider loses focus. |
input |
Emitted when the value changes. |
invalid |
Emitted when the form control's validity is checked and it doesn't meet the constraints. |
CSS Parts
Name |
---|
track-inactive |
Track for the inactive state. |
track-active |
Track for the active state. |
handle |
Handle for interaction. |
label |
Tooltip text. |
tickmark |
Tick mark. |