The range input component consists of a slider enabling a choice between a minimum and a maximum value. It allows the user to select a value when the precise value chosen is not considered necessary.

Usage

This is an imprecise input control that should only be used when the exact value is not important for the user to know. Range controls work well when the users is more concerned with percent distance between the min and the max.

Label

States

Volume

Enabled

Use when interactive and ready for input.

Volume

Disabled

Use when not interactive. For example, when a user does not have permissions to edit the input.

Volume System error

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Volume Changes saved

Success

Use to provide real-time feedback immediately after a user’s input. For example, username available.

Layouts

Range inputs are available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.

Vertical

label message text

Horizontal

label message text

Compact

label message text