The component should be used when a user need to select a value within a predefined range of values.
It gives a hint of the interval and what a typical (default) value is. It also allows to adjust it quickly to check the updated result.
The component includes a slider bar, label, slider control and input field. By default min.; max. and default value should be set. Also, a step value should be set which affects the interval by which a slider moves.
Do's and don'ts
- This version works best on white background.
- Might not be the right choice when the user has to provide a precise value, which is already known in advance. (e.g. 100’234 EUR).
- Don't place the error text under the line - it's too far from the input field which it validates.
- Input fields (the input part should comply with Input fields specification)