Lead:  Liav Nadler

...

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

  • 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 values, ordered from minimum to maximum, for all or some of the range

  • A For a numeric 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

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

...

• 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 based on icons (for example, 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 three 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 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

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

• Mouseover the slider will show a tooltip on the selected value

Validations and errors

• The slider itself has no error state

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

• TBD

Best practices

Use a slider when:

...

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

• To select dates. Use Date Picker / Range Picker instead

Range Slider

...

A range slider is a variation of the regular slider, allowing users to select a range of values within the total range. In this case:

• 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

  • Two tooltips A tooltip when dragging - one for each handletooltip showing the range

• Dragging a handle will be limited by the other handle

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

...