I'm currently working on a project, where an editor can easily edit breakpoints, using a group of color-coded, stacked <input type="range">
-controls.
With pure DOM coding, native style matching is most appropriate as it can effectively meet Accessibility requirements.
Here are some key points:
--graduation-unit
represents a unit length and controls the overall scale relation between the measurements and the DOM size--graduation-low-space
is a variable that specifies the subdivided space of a unit length- The rendering of the text is using counter()
- The positioning of the text is based on padding-inline-start and ch padding-inline-start and ch units