1. What does the component do?

• Allows a quick selection of a value within a range of values.

2. When should the component be used?

• To quickly select a value within a range of values.

3. Rules

• The textfield for displaying the currently selected value is optional.
• The display of min and max values is optional.
• The value can be changed using drag & drop or a click on the slider bar.

4. Variants and statuses

The component has the following statuses:

• Default
• Hover
• Pressed
• Focused
• Disabled

4.1 Continuous

Design specification (horizontal)

• Default
• Hover
• Pressed
• Focused Thumb
• Focused Textfield
• Disabled

Design specification (vertical)

• Default

• Hover

• Pressed

• Focused

• Disabled

• This variant should not be used for very large or very small value ranges, but above all for imprecise value ranges (e.g. "quiet" - "loud", "little" - "much").

4.2 Discrete

Design specification (horizontal)

• Default with Space
• Default with Circle
• Hover Thumb with Space
• Hover Thumb with Circle
• Hover Line with Space
• Hover Line with Circle
• Pressed with Space
• Pressed with Circle
• Focused Thumb with Space
• Focused Thumb with Circle
• Focused Textfield with Space
• Focused Textfield with Circle
• Disabled with Space
• Disabled with Circle

Design spezification (vertical)

• Default with Space
• Default with Circle
• Hover Thumb with Space
• Hover Thumb with Circle
• Hover Line with Space
• Hover Line with Circle
• Pressed with Space
• Pressed with Circle
• Focused with Space
• Focused with Circle
• Disabled with Space
• Disabled with Circle

4.3 Value range

Design spezification

• Continuous
• Discrete Textfield with Space
• Discrete Textfield with Circle
• Discrete Label with Space
• Discrete Label with Circle

4.4 Single value

Design spezification

• Default with Space
• Default with Circle
• Hover Line with Space
• Hover Line with Circle
• Default Symbols