<label for="range_input"> Choose Amount: </label> <input type="range" id="range_input" name="amount" min="0" max="400" step="10" value="200">
step attributes are used to provide the starting value, the minimum and maximum values of the range, and the increment in which a user can change the value, respectively.
Some things to note when styling a range form control:
- Each browser's implementation of the range form control requires different browser specific selectors to be used, which can lead to duplicative rule sets. Ideally you'd want to utilize CSS variables or variables from a preprocessor, like Sass, to make sure that any styling updates get made to all browser specific selectors.
For whatever reason, pre-Chromium (Legecy) Edge will render
::-webkit-slider-thumbstyles, which would be nice to cut down on browser specific styling, if it weren't for the fact that Webkit and Legacy Edge render the form control a bit differently. Webkit needs a negative margin applied to the range's thumb, while Legecy Edge does not. Also, IE11 does not respect Webkit's thumb styling, which means that the
::-ms-thumbselector is still needed to both properly style for IE11, and remove the negative margin Legecy Edge inherits from the Webkit style.
A range form control doesn't receive much (if anything) in the way of inherent styling when a
disabledattribute is applied to it, unlike other form controls which visually look 'dimmed'. Since the range has so many browser specific selectors, stying a disabled range requires the following:
Affects on Screen Reader Announcements?
Applying custom styles to an
input type="range" does not alter its announcements by screen readers.