Web UI Playbook

Slider

Edit this file

Sliders enable users to swiftly select from a range of values.

When to Use Sliders
Understanding the appropriate use cases and alternatives for slider components.

Primary Use Cases

Adjust system preferences where users need immediate visual feedback

75%

Filter search results by selecting minimum and maximum values

$50 - $250

Control playback settings with real-time audio/visual feedback

40%

Decision Guide

✓ Use Sliders When:
  • • Adjusting settings that benefit from immediate feedback
  • • Filtering or sorting by numeric ranges
  • • The relative position is more important than exact values
  • • Working within well-defined boundaries
  • • Users need to see the current state visually
✗ Avoid Sliders When:
  • • Precise numeric input is required
  • • The range is very large (makes fine control difficult)
  • • Users need to enter specific known values
  • • Binary on/off choices (use toggle instead)
  • • Multiple unrelated options (use checkboxes)

Alternative Components

Number Input

For precise numeric values and when users know exact numbers they want to enter.

Toggle/Switch

For binary on/off states and boolean preferences.

Select Dropdown

For discrete options and when space is limited.

Key Principles

  • • Immediate Feedback: Users should see changes in real-time
  • • Clear Boundaries: Always indicate minimum and maximum values
  • • Appropriate Steps: Choose step sizes that match user needs
  • • Accessible Design: Support keyboard navigation and screen readers
  • • Context Awareness: Show current values and units clearly
References & Resources
External resources and design system references.
W3C ARIA Authoring Practices Guide - Slider Pattern
Adobe Spectrum - Slider Guidelines
Apple Human Interface Guidelines - Sliders
Material Design 3 - Slider Guidelines
Blueprint UI - Slider Component
Uber Base Design System - Slider
Visa Design System - Slider Component