Slider
A hard-edge slider with tactile thumb controls. Features multiple thumb shapes, track patterns, and tick marks for precise control.
Basic Slider
Value: 50
Thumb Variants
Default (Square)
Circle
Diamond
Pill
Track Variants
Default
Striped Pattern
Dotted Pattern
Gradient
With Tick Marks
5 Ticks
11 Ticks (0-100 in 10s)
With Labels
Temperature
0°C10°C20°C30°C40°C
Rating Scale
PoorFairGoodGreatExcellent
Combined Variants
Circle + Striped + Ticks
Diamond + Dotted
Pill + Gradient + Ticks
Range Slider
Range: 25 - 75
Range with Circle Thumbs
Practical Examples
70%
$200 - $800
$0$250$500$750$1000
😞😐🙂😊🤩
12px14px16px18px20px22px24px
Step Values
Step: 10
Step: 25
Disabled State
Vertical Orientation
Default
Circle
Striped
Range