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
Knob: Draggable element that users move to set the value.
Selected Range: Portion of the track that visually shows the selected value.
Track: Visual bar that defines the full range of values.
Styles
Slider Value
Size
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.
Last updated