Slider Component
Capsule-styled sliders with solid ink borders and various track patterns.
Basic Slider
Default slider with single value control.
Pattern Track Sliders
Sliders with decorative track patterns for visual interest.
Striped Pattern
Dotted Pattern
Tick Mark Sliders
Sliders with tick marks for discrete value selection.
5 Ticks (No Labels)
4 Ticks (With Labels)
10 Ticks
Custom Thumb Shapes
Different thumb designs while maintaining the Orbit Capsule aesthetic.
Square Thumb
Diamond Thumb
Pill Thumb (Vertical)
Gradient Track Sliders
Sliders with gradient backgrounds for visual feedback.
Primary Gradient
Rainbow Gradient
Temperature Gradient
Contextual Sliders
Sliders with icons and labels for specific use cases.
Range Slider
Step Values
Step: 10
Step: 25
Disabled State
Disabled slider cannot be interacted with.
Vertical Slider
Basic Vertical
Controlled Vertical
Vertical Range
Vertical sliders are useful for volume controls, equalizers, and other vertical-oriented interfaces.
Hover Effects
The slider thumb uses the orbit hover effect for a subtle offset outline on hover/focus. Try hovering over the thumb to see the effect.
Standard Hover Effect
Range Slider with Dual Hover