Components · sliders
Sliders. Real range, styled to taste.
Native <input type="range"> with custom thumb + track. Single, dual-handle, vertical, with tick marks, with floating value bubble.
01 · base
.lsd-slider
Real <input type="range"> — keyboard arrows, screen-reader announcements, all native. JS updates --lsd-pct for the track fill.
sizes
sm / md / lg
Track + thumb scale together.
.lsd-slider--sm / --md / --lg
tones
primary / accent-2
Swap the fill color.
.lsd-slider--primary / --accent-2
02 · variants
Five variants
.lsd-slider--single
Single (default)
One handle, one value.
<input type="range" />
.lsd-slider--dual-handle
Dual handle (range)
Two thumbs — min + max. JS keeps them ordered.
.lsd-slider--dual-handle
.lsd-slider--with-tick-marks
Tick marks
Visual scale notches.
.lsd-slider--with-tick-marks
.lsd-slider--with-labels
Value bubble
Floating chip shows current value above the thumb.
.lsd-slider--with-labels
.lsd-slider--vertical
Vertical
Stacked layout — for volume-style controls.
.lsd-slider--vertical
03 · animations
Thumb feedback
Thumb scales 1.15× while held (:active). Track fill is colored via a linear-gradient from --lsd-pct — no overlay sprite needed.
grab
Press to scale
Drag the handle — it grows while held.
:active::thumb { transform: scale(1.15) }Components · LSD primitives