Lead:  Liav Nadler DONE

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

• The set of values can be either discrete or continuous, depending on the number of values (see below)

Structure

• A slider contains:

  • An axis, representing the range of values

    • In most cases the axis will be horizontal, but it can also be vertical

    • The left (or bottom) area of the axis will be colored, to indicate the selected value

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

  • An Increase button at the right (or top) end of the slider. If the handle is already at the right (or top) end of the slider the increase button will be disabled

  • A Decrease button at the left (or bottom) end of the slider. If the handle is already at the left (or bottom) end of the slider the decrease button will be disabled

  • In case of a discrete set of values: a set of tick marks, with a fixed distance between them, indicating the possible values

• The slider may also include:

  • A set of values, ordered from minimum to maximum, for all or some of the values

  • For numeric values: a supplemental text field, allowing the user to view the selected value and to change it manually

  • When dragging: a tooltip on top (or to the side) of the handle, showing the relevant value:

Default State

• A slider must have a default value

Content

• In most cases, values will be numbers with a fixed increment between them (e.g. 1, 2, 3… or 5, 10, 15, 20…)

• Alternatively, values can be textual (e.g. Poor, Fair, Average, Good, Excellent) or icon-based (e.g. sentiment indicators)

States

Focus management - TBD

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

Interaction

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

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

   1. If ticks exists, the movement of the handle across the axis will be discrete, along the tick marks

   2. If no ticks exist, the movement will be continuous

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

2. Clicking on the axis itself. In this case the handle will move to the selected position

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

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

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

4. Entering a value to the text field, if exists. In this case, the handle will move to the relevant position on the axis after moving the focus

• Hovering the slider will show the current value in a tooltip above (or to the side of) the selected value

Validations and errors

• The slider itself has no error state

• If a text field exists: typing out of range values or illegal characters will show an error message. See Field Validation

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 or a dropdown menu

• For selecting dates. Use a Date Picker / Range Picker instead

Range Slider

	Basic range slider
	Range slider with input fields

A range slider is a variation of the slider, allowing users to select a range of values within the total range

Usage & Behavior

• The slider includes two handles. The selected area will appear between the handles

• The slider will not include increase and decrease buttons

• The slider may include:

  • Two input fields - one for the minimum value and one for the maximum value

  • A tooltip when dragging - one tooltip showing the entire range

• Dragging a handle will be limited by the other handle or by a minimum valid range

Accessibility compliance

In Focus state for a single range:

• Using left and right arrows will move the handle accordingly

• If a supplemental text field exists, typing will enter/update the value

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Code

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