Styled Range Slider

Pattern Details

<label for="range_input">
  Choose Amount:
</label>
<input type="range"
  id="range_input"
  name="amount"
  min="0"
  max="400"
  step="10"
  value="200">

The native value, min, max, and 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-thumb styles, 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-thumb selector 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 disabled attribute 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:
  • input[type=range][disabled]
  • input[type=range][disabled]::-webkit-slider-thumb
  • input[type=range][disabled]::-moz-range-thumb
  • input[type=range][disabled]::-ms-thumb
  • input[type=range]:not([disabled])::-webkit-slider-thumb:active
  • input[type=range]:not([disabled])::-moz-range-thumb:active
  • input[type=range]:not([disabled])::-ms-thumb:active

Affects on Screen Reader Announcements?

Applying custom styles to an input type="range" does not alter its announcements by screen readers.