Input range

The input range provides a visual indication of adjustable content, where the user can increase or decrease the value of the range.


How to use an input range

Input ranges allow users to select a specific value by dragging a slider across a range of values.

When using an input range:

  • Always use a label that clearly communicates its purpose
  • Use small labels to make it clear what the start, end and middle values of the range represent
  • Make sure that users can select a value range easily without having to struggle for a precise value

Use input range for imprecise values, for example inputting how satisfied a user is with a product. For precise values, use a text input or dropdown list.


Types of input range

With supporting text

Supporting text provides extra guidance or instruction to people filling out a form field. It can also be used to clarify how the information will be used.

Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Supporting text

Content Guidelines

Labels for an input range should be clear and concise.

Do
Lightness percentage
Don't
What is the lightness percentage?

Was this page helpful?


Get in touch

Our team can answer any questions about using accordions or give you a helping hand with your next project.
Select a theme to demo: