Components
Slider
The cds segment slider: a 32px control with a 28px track, a 24×28 white thumb that grows while dragged, stops, a marked default and a range.
Effort control
Discrete stops (3×3 dots, the marked default 3×9) with the fill gliding between them; the label under the mark turns secondary when the value sits on it. ArrowLeft / Right step, Home / End jump; aria-valuetext reads the level name. valueCommit fires after release.
EffortHigh
FasterSmarter
Committed: High
Continuous and range
Without stops the fill follows the thumb directly; two values draw the fill between the thumbs.
Sizes
data-size re-scales the control: sm 28 (thumb 20×24), default 32 (24×28), lg 40.
Light and dark
light
dark