Use our custom range inputs for consistent cross-browser styling and built-in customization.
Create FormRange
component.
The track (the background) and thumb (the value) are both styled to appear the same across browsers.
Add the disabled
boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Range inputs have implicit values for min
and max
—0
and 100
, respectively.
You may specify new values for those using the min
and max
attributes.
By default, range inputs "snap" to integer values. To change this, you can specify a step
value.
In the example below, we double the number of steps by using step="0.5"
.