- Guidelines
- React API Reference
- Blazor API Reference
Sliders allow users to select a value from a continuous range by dragging a handle along a track, providing an intuitive way to adjust numeric values with immediate visual feedback.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for selecting values from a continuous range where precise control is important. Ideal for adjusting settings, filtering, or configuring parameters. |
| Content | Provide clear labels for min/max values and current selection. Consider showing the current value during interaction. |
| Behavior | Provide smooth dragging interaction with immediate visual feedback. Support keyboard navigation for accessibility. |
| States | Clearly indicate enabled, disabled, and focused states. Show visual feedback during interaction and value changes. |
| Feedback | Use visual indicators for current position and range. Provide haptic feedback on mobile devices when possible. |
| Examples | Volume controls, price ranges, date ranges, opacity settings, or any numeric value selection within defined bounds. |
Best Practices
- Clear Range Indicators: Always show minimum and maximum values to provide context for the selection.
- Appropriate Step Size: Choose step sizes that match the precision needed for the use case.
- Responsive Design: Ensure sliders work well on both mouse and touch devices with appropriate handle sizes.
- Value Display: Show the current value(s) clearly, especially during interaction.
- Keyboard Support: Provide arrow key navigation and page up/down for larger steps.
- Accessible Labels: Include proper ARIA labels and descriptions for screen readers.
Do’s and Don’ts
Do
- Use for continuous value selection within defined ranges.
- Provide clear visual feedback for current values and ranges.
- Support both mouse/touch and keyboard interaction.
- Show value labels or current selection when helpful.
Don't
- Use for discrete choices (use radio buttons or select instead).
- Make handles too small for touch interaction.
- Hide the current value when precision matters.
- Use for ranges where exact values are critical without additional input methods.
Additional Guidance
- Psychological Impact:
- Direct Manipulation: Sliders provide a sense of direct control over values, making adjustments feel intuitive.
- Immediate Feedback: Real-time visual changes help users understand the impact of their adjustments.
- Range Awareness: Visual representation of the full range helps users understand the scale and make informed decisions.