Overview

The slider component provides an interactive and accessible way for users to select numeric values or ranges within a form. It is designed for flexibility, clarity, and usability, supporting both simple and advanced use cases with customizable features.

 

Key Features

• Single or Range Selection: Supports both single-value and range selection modes.
• Direct Numeric Input: Optional input fields let users type values directly.
• Custom Labels: Add contextual labels before or after the value (e.g., “$”, “kg”).
• Tick Marks: Show regular or custom ticks, with optional labels for guidance.
• Error and Success States: Built-in visual feedback for validation.
• Accessibility: Fully keyboard navigable and screen-reader friendly.
• Fluid Layout: Can expand to fit the width of its container.

 

Anatomy

1. Label: Describes the slider’s function; can be visually hidden but remains accessible.
2. Description: Additional information to describe the slider’s function.
3. Error Message: Feedback for validation states.
4. Track: The horizontal bar representing the value range.
5. Handle/thumb: Draggable handles for value selection (one for single, two for range).
6. Ticks: Optional visual markers for steps or custom values.
7. Value Display: Shows the current value(s), with optional units or context.

 

States

• Default: Ready for user interaction.
• Disabled: Grayed out, not interactive.
• Readonly: Non-editable but still focusable.
• Error: Highlights invalid input, with optional error description.

 

Best practices

Do:

• Use for numeric input where a slider improves speed or clarity.
• Add clear labels and units for context.
• Use ticks and steps that make sense for your data.
• Provide error and success feedback when validating input.

Don’t:

• Don’t rely only on color—pair with icons, text, and labels.
• Don’t hide essential labels from assistive technologies.
• Don’t use for very precise input if accuracy is critical (unless step and snap are set).

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Component checklist

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.