Range Input Example

Introduction

This web page contains several different Range Input elements. It is meant to be used for screen reader testing.

Range Input Based Color Picker

The following is a color picker based that uses three Range Input elements to select a RGB color. It is not recommended that this be used in production.

• The Red range input uses only the min, max, and value attributes.
• The Green range input uses the aria-valuemin, aria-valuemax, and aria-valuenow attributes in addition to using the min, max, and value attributes.
• The Blue range input uses the aria-valuetext attribute in addition to using the aria-valuemin, aria-valuemax, aria-valuenow, min, max, and value attributes.

Screen Reader Support

The three major screen readers for Microsoft Windows; JAWS, NVDA, and Microsoft Narrator; all behave more or less the same for all three range inputs. The screen readers will speak the current value but not the minimum and maximum value for the Red range input and the Green range input. The screen readers will speak the value of the aria-valuetext attribute for the Blue range input.

Vertical Range Input

The following is a vertical range input.

Choose a comfortable temperature (° F):