Slider

A track with a draggable thumb for picking a value from a range, or two thumbs for picking a span inside it. The value is shown beside it, so it is never a guess.

Preview

When to use

• For values where the rough position matters more than the exact number: volume, a price range, a zoom level.
• With a range of two thumbs for filters: min and max price.

Reach for something else

• For exact values, like a quantity or an age: that is an Input, perhaps with steppers.

Anatomy

1. 1

   Track

   The full range, in a light grey.

2. 2

   Fill

   The chosen part of the track, in the brand colour.

3. 3

   Thumb

   A white circle with a ring; one or two.

4. 4

   Value

   The current number or span, beside the label or above the thumb.

States

Accessibility

• Each thumb is role="slider" (or a native <input type="range">) with aria-valuemin, aria-valuemax and aria-valuenow.
• The arrow keys step the value; Page Up and Page Down step further; Home and End jump to the ends.
• In a range, each thumb has its own label — Minimum price, Maximum price — and they cannot cross.
• aria-valuetext gives the value with its unit when the number alone is unclear.

Source

The Slider is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

See it in a block