💠 Slider

An input where the user selects a value from within a given range.

Usage

The Slider component allows users to select a specific value from a range by sliding a thumb along a track.

It's a user-friendly alternative to entering a number and is used for settings that reflect intensity levels, such as volume, brightness, or color saturation.

When to use

• Adjusting settings: Use a Slider when the user needs to make fine-grained adjustments within a defined range, such as adjusting the volume or screen brightness.
• Quick selection: Employ a Slider for settings that benefit from quick, in-the-moment adjustments rather than precise input values.
• Visual representation of range: Sliders give a visual representation of the range of possible values and the current position within that range, making them useful for filters like price ranges on e-commerce sites.

Avoid using Sliders for binary inputs, precise value entry (where a text box or a spin button would be more appropriate), or very large ranges where a Slider would be too sensitive to practical adjustments. Additionally, it's not ideal for situations where the exact value needs to be known or entered, as the thumb position might not provide sufficient precision.

Examples

Default

Range

Add multiple values to create a range slider.

Step size

Use the step prop to increase the stepping interval.

Prevent thumb overlap

Use minStepsBetweenThumbs to avoid thumbs with equal values.

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the slider WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions