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. 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:


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