Slider Sizes
Small Size (sm)
Smaller thumb (16px) and input field for compact interfaces
Medium Size (md) - Default
Default size with balanced visibility and usability
Large Size (lg)
Larger thumb (24px) and input field for high-prominence controls
Configuration Options
Custom Range
Custom min/max values with meaningful labels
Step Increments
Discrete steps for specific value sets
Decimal Steps
Decimal step values for precise adjustments
Without Input Field
Pure slider interaction without numeric input
States
Disabled State
Disabled state with visual indication
Without Label
Accessible slider without visible label using aria-label
Real-World Examples
Settings Panel
Common settings configuration with different ranges and purposes
Data Filtering
Filtering interfaces with threshold and range controls
Form Input
Form inputs for ratings, scores, and assessments