Include a label

Every slider should have a label. A slider without a label is ambiguous and not accessible. Write the label in sentence case.

Review label-less designs

In rare cases where context is sufficient and a label could be absent, make sure to have the design reviewed and approved by an accessibility expert. These sliders must still include an ARIA label in HTML, using either aria-label or aria-labelledby depending on context.

Allow a hot text option when needed

In addition to dragging the handle, sliders can offer other ways to change the value, known as "hot text." Users can click the value text and drag up or down, or scroll up or down while hovering over the value text.

Show value units to help provide context

Slider values can include a unit when it adds context, such as "%" or "px." When the value is shown within a text field, the unit disappears on focus.

Prefix positive/negative values

If the value ranges from negative to positive, prefix the value with a plus (+) or minus (-) sign. When the sign is shown within a text field, it remains visible on focus. When the sign is shown outside the text field, there should be a space between the sign and the numerical value for readability.