Lead:  Liav Nadler

...

• 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 at least four elements:

  • A horizontal 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. 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 In case of discrete values: a set of tick marks, with a fixed distance between them, indicating the possible values

• The slider may also include:

  • A set of textual values, ordered from minimum to maximum only minimum and maximum valuesA tooltip on top of the handle, showing the selected value , for all or some of the range

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

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

Content

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

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

States

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

...

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

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

   2. If the range is relatively largeno ticks exist, the movement will be continuous

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

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

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

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

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

Validations and errors

...

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

Future Version (TBD)

• or a dropdown menu

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

...