Slider

Usage

Sliders allow users to instantly choose a numeric value within a given range. Slider is to be used when quickly defining the precise value won’t matter to the user, but rather only the approximate range. Slider can be used to request single value or range of values from the user in a continuous or discrete manner. Data set can be represented with a linear or logarithmic progression, as appropriate.

Standard Slider

Slider With Input Field

The label providing a short description of the requested input can be placed above the slider. To enable easier data input, the input field can be placed next to the slider.

Behaviour

• Ensure that everything stays in sync: the cursor’s shape, the hover effects, the position of the handle, the responsive to clicking and dragging, the change in values, the change of states inside and outside the slider area.

• Allow tab to thumb control and arrow keys to move it

Best Practices

• Use slider when the user needs to select numeric value, percentages or other types of discrete data

• Present the selected value by displaying the text label below slider handle

• If the user needs to enter exact numerical value, use the input field rather than slider

• If the interface accepts only a few input options, then a set of radio buttons, checkboxes or predefined options might work better

• Allow users to jump to any value on the track

Sizing

Slider comes in one size, and the width can be adjusted to fit the container it is placed within. The track height is 4px, and handle dimensions 24px × 24px, with padding 2px.

States

• Slider statuses follow the same state styling principles as the checkbox or radio component

• Enabled track background is Grey L80, and disabled status L60

• Enabled background colour is Sky Blue Base

• Validation state is Red Base