Range Slider
Form element for fine-grained values
Demo
See more examples
API
Tags
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
input[type="range"] |
Native element | None | |||||||
output |
Native element | The value of range |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
min |
Number | Minimum value, default is 0 | |||||||
max |
Number | Maximum value, default is 100 | |||||||
step |
Number | Sets the granularity of values, default is 1 | |||||||
orient coming soon |
vertical | Displays the range vertically |
Events
Name | Detail | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
change |
None | Fires after the value is committed. | |||||||
input |
None | Fires as the value changes. |
Guidelines
Displaying range values
A common use case is to display the value of range as it updates. Mdash leaves that part of the design open for customization, but with the one requirement to use the standard <output>
element to contain the value.
Here's two simple designs to get you started:
Accessibility
Use for
and id
as usual, but also use for
on output
elements. MDN has more details
ARIA: Using the slider role.