Lead:  Liav Nadler ONGOING

Description

A slider is an input component, allowing users to select a value from a predefined range

Usage & Behavior

General guidelines

• A slider may appear in a form, a dialog, a filter panel or a widget

Structure

• A slider contains at least four elements:

  • A horizontal axis, representing the range of values

  • A handle, which a user can drag in order to select a value

  • An Increase button at the right end of the slider

  • A Decrease button at the left end of the slider

• The slider may also include:

  • A set of tick marks, with a fixed distance between them, indicating the possible values

  • A set of textual values, ordered from minimum to maximum

  • A tooltip on top of the handle, showing the selected value

  • A supplemental text field, allowing the user to view the selected value and to change it manually. This is especially relevant to numeric values mandatory?

Default State

• A slider must have a default value, which the handle is set to

Content

• In most cases, values are numbers with a fixed increment between them (e.g. 5, 10, 15, 20)

• Alternatively, values can be textual (e.g. Poor, Fair, Average, Good, Excellent) or based on icons (e.g. for sentiment)

States

State	Image	Comment
Normal
Hover
Active
Disabled
Focused
Focused Hover
Focused Active
Focused Disabled

Interaction

• The user can select a value using one of three methods:

  • Dragging the handle to the desired location

  • Clicking the increase or decrease buttons

  • Entering a value to the text field, if available

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a label its on>>

Use:

• <…>

• <…>

Don’t use

• <…>

• <…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

<<a box containing the code - discuss with Femi>>