Component
Slider
A slider component is a user interface element that enables users to select a value from a continuous range by dragging a handle along a track.
Anatomy
Sliders are often used for setting preferences, adjusting settings, or selecting numerical values.
- Track: The horizontal or vertical line that represents the range of values.
- Thumb/Handle: A draggable element that moves along the track to select a specific value.
- Value Indicator: A tooltip or display that shows the selected value.
- Minimum/Maximum Values: Numeric labels or indicators at the ends of the track, representing the range.
Usage
The Slider component is used in web and application design for the following purposes:
- Data Selection: Allowing users to select a value from a continuous range or set of options.
- Setting Configuration: Adjusting settings such as volume, brightness, or preferences.
- Filtering and Sorting: Filtering data within a specified range or sorting items by numerical criteria.
Common places slider appear : Mobile app homepage , website homepage and other pages when needed etc.
When to use
- Users need to select a value from a range or a set of options.
- Precise control over a numerical value or setting is required.
- You want to provide a visually interactive and intuitive interface.
- Enhancing user experience and enabling fine-tuned adjustments is important.
When not to use
- Users do not need to select values within a range or set of options.
- Simpler input methods, like radio buttons or checkboxes, can achieve the same goal.
- The precision of the selection is not a critical aspect of the interaction.
- Sliders add unnecessary complexity to the user interface.
Accessibility
To ensure accessibility, consider the following:
- Make sure that the slider is keyboard accessible.
- Provide clear and concise labels for the slider.
- Add an aria-label attribute to the slider to provide a descriptive label for screen reader users.
- Use the aria-valuemin and aria-valuemax attributes to indicate the minimum and maximum values of the slider to screen reader users.
- Use the aria-valuenow attribute to indicate the current value of the slider to screen reader users.
Do
Make sure that the slider track is high enough contrast to be easily visible.
Don't
The slider track is not high enough contrast to be easily visible.
Do
Include clear and informative labels for minimum and maximum values.
Don't
Didn’t Include clear and informative labels for minimum and maximum values.
Content
When implementing Slider content, follow these guidelines:
- Clearly label the minimum and maximum values.
- Include numeric labels for intervals or ticks if applicable.
- Provide tooltips or value indicators to display the selected value.
- Ensure that the Slider aligns with the context and purpose of its use in the interface.