Slider
A custom-styled range input with glass track and thumb.
Preview
Usage
<input type="range" class="glass-slider" min="0" max="100" value="60" />CSS Details
Track
| Property | Value |
|---|---|
| Height | 6px |
| Background | rgba(0,0,0,0.08) (dark: rgba(255,255,255,0.05)) |
| Border | 1px solid var(--glass-border) |
| Border Radius | 9999px (pill) |
| Shadow | inset 0 1px 1px rgba(0,0,0,0.05) |
Thumb
| Property | Value |
|---|---|
| Size | 20×20px |
| Background | #ffffff |
| Border | 1.5px solid var(--glass-border) |
| Shape | Circle |
| Shadow | Specular glare + 0 3px 8px ambient |
| Active | scale(1.15) on press |
The slider is cross-browser compatible with both -webkit-slider and -moz-range pseudo-elements.