Slider
An input component that allows users to select a value from a range.
Overview
The Slider component is an interactive control that allows users to select a value or range from a fixed set of values. It's commonly used for adjusting settings like volume, brightness, or filtering items by price range.
Our Slider component is built with Radix UI primitives and follows WAI-ARIA best practices. It supports keyboard navigation, focus management, and screen reader announcements.
Basic Usage
The default Slider component provides a simple, accessible range input.
Examples
With Value Display
Display the current value of the slider for better user feedback.
With Icons
Add icons to provide visual context for the slider.
Range Slider
Create a range slider by providing multiple values.
Custom Steps
Customize the step size for more precise or coarse control.
Disabled State
Slider can be disabled to prevent user interaction.
API Reference
The Slider component provides a way to select a value or range from a set of values.
| Prop | Type | Description |
|---|---|---|
| value | number[] | The controlled value of the slider. Use with onValueChange for controlled usage. |
| defaultValue | number[] | The default value of the slider when initially rendered. Use for uncontrolled usage. |
| onValueChange | function | Event handler called when the value changes. |
| min | number | The minimum value for the range. Defaults to 0. |
| max | number | The maximum value for the range. Defaults to 100. |
| step | number | The stepping interval. Defaults to 1. |
| disabled | boolean | When true, prevents the user from interacting with the slider. |
| orientation | "horizontal" | "vertical" | The orientation of the slider. Defaults to "horizontal". |
| name | string | The name of the slider. Submitted with its owning form as part of a name/value pair. |
The Slider component also accepts all standard HTML attributes for the div element.
Usage Guidelines
Follow these guidelines for effective use of the Slider component:
Best Practices
Do
- Use sliders for continuous values like volume, brightness, or zoom
- Display the current value or range for better user feedback
- Use appropriate step sizes for the context (smaller steps for precision)
- Add labels and icons to clarify what the slider controls
- Consider using a default value that is the most common or expected setting
Don't
- Use sliders for binary choices (use switches or checkboxes instead)
- Use sliders for exact numeric input (use number inputs instead)
- Use sliders without clear indication of their purpose
- Make sliders too small or difficult to interact with
- Use sliders for values that rarely need adjustment
When to Use Sliders vs. Other Inputs
Choose the right input type for your specific use case:
| Input Type | Best Used For | Examples |
|---|---|---|
| Slider | Continuous values with visual feedback | Volume, brightness, zoom level, opacity |
| Number Input | Precise numeric values | Quantity, age, exact measurements |
| Select | Discrete options from a list | Size selection, quality settings, categories |
| Range Slider | Selecting a range between min and max | Price range, date range, filter by attributes |
Accessibility
The Slider component follows WAI-ARIA guidelines to ensure accessibility.
Keyboard Navigation
Users can navigate to sliders using the Tab key and adjust values using:
- Arrow Left/Right: Decrease/increase by one step
- Page Down/Up: Decrease/increase by larger steps
- Home/End: Set to minimum/maximum value
Screen Readers
The component uses proper ARIA attributes to communicate values and changes to assistive technologies.
- Uses
aria-valuemin,aria-valuemax, andaria-valuenow - Announces value changes as users interact with the slider
- Provides context through associated labels
Accessibility Tip
Always associate labels with sliders using the htmlFor attribute that matches the slider's id. For better user experience, display the current value or range to provide visual feedback, especially for users who may have difficulty perceiving small visual differences.