Lead:  Liav Nadler ONGOING

Description

A slider is a form component, allowing users to select a value from a predefined range by dragging a handle across a horizontal axis

Types 

• There are two types of sliders: a single selection slider, which is more common, and a range slider. Both of them are described below

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 two elements:

  • A horizontal axis, representing the range of values

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

• The slider may also include:

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

  • A set of values, ordered from minimum to maximum

  • A supplemental text field, allowing the user to enter the value manually. This is especially relevant to numeric values

Default State

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

Content

• Typically, values are numeric (e.g. 5, 10, 15, 20), but they can also be textual (e.g. Poor, Fair, Average, Good, Excellent) or based on icons (e.g. for sentiment)

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

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

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

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>>