Slider
An input for selecting a value from a range.
Last updated: March 8, 2026
This page now includes multiple slider patterns for controls, media, filters, and settings.
Basic Slider
A simple single-thumb slider with a default value.
Value: 50%
Range Slider
Dual-thumb slider for selecting a min and max value.
Disabled Slider
A non-interactive slider state for read-only contexts.
Disabled Slider
Step Slider
Slider with fixed increments for controlled selections.
Step: 25 | Current: 50
Small Slider
Compact slider variant for dense UI layouts.
Compact Slider
Large Slider
Larger hit-area slider for improved accessibility.
Large Slider - Better Accessibility
Volume Slider
Media volume control slider with live percentage feedback.
Temperature Slider
Temperature selector with dynamic visual feedback.
Brightness Slider
Brightness control with real-time preview panel.
Brightness: 50%
Price Range Slider
Styled dual-thumb slider for price filtering.
Price Range
Gradient Slider
Hue selection slider with color preview.
Hue: 0 degrees
Time Slider
Duration selector for minute/hour ranges.
Duration: 30m
Speed Slider
Playback speed control with decimal increments.
Playback Speed: 1.00x
Opacity Slider
Opacity control with visual alpha preview.
Opacity: 100%
Saturation Slider
Color saturation adjustment slider with live preview.
Saturation: 100%
Blur Slider
Image blur intensity slider with pixel-level control.
Blur: 0.0px