Slider

Sliders allow users to adjust values within a specified range by dragging a handle along a track. They provide a quick and intuitive way to set values for inputs.

Overview

Sliders are ideal for visually representing and adjusting a continuous value, allowing for intuitive interaction within defined limits.

When to use

• Use when you need to let users adjust a value smoothly, such as brightness or volume settings.

• Best used when a range of values needs to be selected or modified within set limits.

• Use when you want to display instant feedback to the user as they adjust the value along the slider.

• Use when you need to allow the user to set a minimum and maximum range, such as setting price filters.

When not to use

• Avoid sliders when the user needs to input a precise number, where a text input field is better.

• Don’t use sliders for selecting distinct or predefined options, such as choosing a list of items.

• Don’t use sliders when there is an overwhelming range of values that may cause the user difficulty in making fine adjustments.

• Avoid using sliders when screen space is limited and fine adjustments may be difficult to control.

• Do not use a slider for static information display, such as showing a progress bar or indicator.

Types

Anatomy

1. Knob: Draggable element that users move to set the value.

2. Selected Range: Portion of the track that visually shows the selected value.

3. Track: Visual bar that defines the full range of values.

Styles

Slider Value

Size

Size	Knob (px)	Track Height (px)
Small-16	16	16
Medium-18	16	18
Large-24	20	24

Accessibility

• Keyboard Accessibility: Sliders should be operable via keyboard inputs, with users able to increment or decrement values using arrow keys or step controls.

• Visible Focus States: Ensure that sliders have a clear focus state to aid in keyboard navigation for users relying on assistive technologies.

• Value Labels and Feedback: Always provide textual or numerical feedback near the slider to clearly communicate the value as it changes.

• Adjustable Step Intervals: Provide step-based control for users who may need to make more precise adjustments, making sure each step is clearly defined.

• Clear Visual Indicators: Ensure both the handle and track of the slider are easily distinguishable for users with visual impairments.

Example

• Volume Control: A slider used to adjust audio output levels on a media player.

• Brightness Adjustment: Used for modifying screen brightness or lighting intensity in settings menus.

• Range Selector for Price Filter: A dual-handle slider used to set a minimum and maximum price range on e-commerce websites.

• Zoom Controls: For applications where users need to zoom in or out, like maps or photo editors.

• Time Range in Video Playback: Allows users to select a start and end time for trimming a video or audio clip.