slider

24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Slider definition and purpose

Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track. A slider allows a user to select a single value or range of values available within the slider track.

When to use sliders

Use sliders when selecting a single value or range of number values. Use sliders when there is a need to show a selection of a single value or range of values. Use sliders when needing to expose a variety of options or to limit the number of options quickly.

When not to use sliders

Do not use sliders for extremely large ranges, for example, 1-1000. Do not use sliders for ranges that are too small, for example, 1-3. Do not use sliders for complex inputted values that are not numbers.

Slider variants

Sliders come in two variants: Default slider and Range slider. Default sliders allow users to select a single value within the slider track. Range sliders allow users to define minimum and maximum values from a predefined range within the slider track.

Default slider anatomy

The default slider consists of six parts: (1) Label - text describing what kind of value will be selected from the slider; (2) Min value - the minimum value that can be selected in the slider range; (3) Max value - the maximum value that can be selected in the slider range; (4) Number input - an input to specify a selected value within the slider range; (5) Handle - an indicator that can be moved on the track within the slider range to specify a selected value; (6) Track - shows a user's available minimum and maximum values on the range to select from.

Range slider anatomy

The range slider consists of seven parts: (1) Label - text describing what kind of value will be selected from the slider; (2) Min value number input - an input to specify a selected minimum value within the slider range; (3) Max value number input - an input to specify a selected maximum value within the slider range; (4) Min value - the minimum value that can be selected in the slider range; (5) Max value - the maximum value that can be selected in the slider range; (6) Handles - two indicators that can be moved on the track within the slider range to specify selected minimum and maximum values; (7) Track - shows a user's available minimum and maximum values on the range to select from.

Slider label guidelines

Labels inform users what kind of value(s) they are selecting in the slider. Keep the label short and concise by limiting it to a single line of text. Labels should be placed above the slider so the label does not become obscured when interacting with the handle.

Min and max value text guidelines

Min and max value text indicate a slider's minimum and maximum value range. Min and max value text should accurately reflect the user's selection using the handles or the number input.

Slider states

The default and range sliders have the following states: enabled, hover, focus, active, error, warning, disabled, read-only, and skeleton.

Slider enabled state

The enabled state occurs when the slider is live, and a user is not directly interacting with it. The enabled state is commonly referred to as the default or normal state of the component.

Slider hover state

The hover state occurs when a user's mouse cursor is hovering over the fields or handles of the slider component. Use a tooltip on hover if the slider does not have number inputs to show the selected values.

Slider focus state

The focus state occurs when a user tabs to or clicks on a field or handle, indicating the user has successfully navigated to the component. Use a tooltip on focus if the slider does not have number inputs to show the selected values.

Slider active state

The active state occurs when a user is pressing down on the handles of the slider component and interacting with it. Use a tooltip on active if the slider does not have number inputs to show the selected values.

Slider error state

The error state occurs when a slider component marked as required has not had an option selected, if the selected values are out of range, if the values are not numbers, or if triggered due to a system error. This state requires a user response before data can be submitted or saved.

Slider warning state

The warning state is used when you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved.

Slider disabled state

The disabled state occurs when the user cannot interact with a component and all interactive functions have been removed. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted.

Slider read-only state

The read-only state occurs when the user can review but not modify the component. This state removes all interactive functions like the disabled state but can still be focusable, accessible by screen readers, and passes visual contrast for readability.

Slider mouse interactions

Users can trigger a value change by clicking anywhere on the horizontal track or by dragging the slider handle. Either method repositions the slider and automatically updates the value in the number input. For range sliders, the closest value (minimum or maximum value) will be updated depending on where the user clicks on the range slider.

Slider keyboard interactions - default slider

For default sliders, users can enter an exact numeric value into the number input field or use the up, down, left, or right arrow keys to change the value. Either method adjusts the slider handle to the corresponding position. Users can also increment the value by using the arrow keys when the slider receives focus. The arrow keys, in combination with the shift key, can alter the slider by the value of the stepMultiplier.

Slider keyboard interactions - range slider

For range sliders, once focus is established, the user can define a numerical range by: entering the exact value into the text field, moving the slider handle with their mouse (which automatically updates the value in the number input), or using the up, down, left, or right arrow keys (which automatically updates the value in the number input and moves the slider handle to the corresponding value). Up, down, left, or right arrow keys change the value by one step size increment. For example, pressing the right arrow key changes the inputted value from 59 to 60, increasing the value by 1 unit. Shift + up, down, left, or right arrow keys change the value by 10 step size increments. For example, shift + right arrow key changes the value from 60 to 70, increasing the value by 10 units. Home key: moves focus to the first range selector header. End key: moves focus to the last range selector header. The step size increment is how many increments the inputted value and slider handle will jump when using the arrow keys, and should be set to reasonable values.

Sliders without number input tooltip usage

If the slider does not include number inputs to display the selected values, use a tooltip on hover, focus, and active to show the selected values.

Sliders with custom value tooltip usage

For sliders with custom value, show a tooltip on hover, focus, and active to display the selected value. These labels can vary by use case, and the tooltip should help users understand their selection without needing a separate input. For example, between values of low and high, the tooltip should display low when the handle is near the start of the range, medium when it's around the middle, and high when it approaches the end.

Do not use slider as a date selector

It is best practice to describe the range value in numbers and to not use a slider as a date selector. To select dates, use the date picker component instead.

Do not use slider ranges with non-discrete large increments

Do not use sliders in ranges that result in non-discrete large increments. Ensure that the range increments are appropriately sized.

Give your agent this brain