Sliders
A Slider is an input component that controls
adjustable values and ranges. These can be managed by the user by moving the
handles from side-to-side, instead of entering it manually or choosing it
from a list.
Use Cases
- Whenever the users must select from a set of values and a fluid interaction is preferred instead of the standard input/selection from a list.
- Whenever a control must show real-time progress of a process but the user must still be able to rewind/forward through it (for example, a video player).
HTML
Do's & Dont's
Prioritize Labeled versions
Even considering that unlabeled versions are supported be aware that
providing user clarity on the context the components are shown is
always preferable.
Use unlabeled versions only if the business needs explicitely require it.
Use unlabeled versions only if the business needs explicitely require it.
Clearly define intervals based on
business needs
In case you are opting for a Step Slider, be sure that the step
values have been previously defined by real-life use cases or
business criteria.
Also avoid to include more than 4 steps, as this compromises usability of the component itself.
Also avoid to include more than 4 steps, as this compromises usability of the component itself.
Use sliders just for Values
Be mindful that the Slider component is only advised for numeric
options. Using this component as a multi- selector for string values
or other type of data is not advised at all.
For different purposes, please consider the use of dropdowns, checkboxes, switches or radio buttons.
For different purposes, please consider the use of dropdowns, checkboxes, switches or radio buttons.
Alternative and Related components
