Lead:  Liav Nadler

...

• 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

...

• The user can select a value using one of three 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

...

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

...