Slider
Precision control sliders styled as clean, capsule-shaped elements in the Tinted Trays design system.
Default Slider
A simple slider for single value selection with softer chart-3 color.
Color Variants
Different color options for semantic or aesthetic purposes.
Volume Control
Interactive slider with real-time value display and tray-colored icon.
50%
Brightness Control
Another example with tray-colored icon and value indicator.
75%
Slider in Tray
Slider placed inside a tray container using primary color for contrast.
Opacity75%
Range Slider
Dual-thumb slider for selecting a range of values.
Price Range$25 - $75
$0$100
Step Slider
Slider with defined step increments.
Quality Level
LowMediumHighUltraMax
Settings Panel
Multiple sliders organized in a tray container.
System Settings
Configure performance
Performance
Master Volume
Display Brightness
Disabled State
Slider in disabled state.