Range Slider

Form element for fine-grained values


See more examples



Name Type Content
input[type="range"] Native element None
output Native element The value of range


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


Name Detail Description
change None Fires after the value is committed.
input None Fires as the value changes.


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:


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