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. The area to the left of the handle is colored to indicate the selected range

  • An Increase button at the right end of the slider. If the handle is at the right end of the slider the increase button will be disabled

  • A Decrease button at the left end of the slider. If the handle is at the left end of the slider the decrease button will be disabled

• 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 only minimum and maximum values

  • 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 can be the minimal or the most common value

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:

1. Dragging the handle to the desired location (see Drag and Drop). In this case:

   1. If the range of values is relatively small, the movement of the handle across the axis will be discrete, along the tick marks

   2. If the range is relatively large, the movement will be continuous

   3. If a text field exists, the value will be updates automatically

2. Clicking the increase or decrease buttons. In this case:

   1. The handle will move to the the next / previous value respectively

   2. If a text field exists, the value will be updates automatically

3. Entering a value to the text field, if exists. In this case, the handle will move to the relevant location on the axis

Validations and errors

• The slider itself has no error state

• If a text field exists

Best practices

Use a slider when:

• Values have a distinct order

• There is a default value

• There are at least three possible values

Don’t use

• If one or more of the conditions above is not met. In this case, consider using radio buttons

Future Version (TBD)

Range Slider?

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