Slider
A value picked from a range. Specification: docs/components/slider.md
Basics
A Field around a native range input. canon.js fills the track up to the thumb and keeps the shown value in step; without JavaScript the slider still works, unfilled, and the value is hidden. The value appears over the thumb while you hover, focus or drag the slider (try the second one).
Per instance.
Named marks
A <datalist> in the box, linked with the input's list. The shown value uses the mark's name. Unevenly spaced marks are placed by canon.js.
States
Vertical
data-orientation="vertical" on the field. The minimum is at the bottom.
Size
data-size on the field or a container: a 4 / 5 / 6px track.
Edge cases
Higher limits finish batches sooner but can slow down interactive requests for everyone in the workspace.