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. There are so many ways to do that, so M- leaves that part of the design open for customization. The one requirement is to use the standard <output> element to contain the value.

Basic designs are extremely easy to do:

Accessibility

Use for and id as usual, but also use for on output elements. MDN has more details ARIA: Using the slider role.