COMPONENT

Range

A value you drag, on a hairline track. The box is the hit area, the line is one pixel, and the grip wears the corner ladder like every other control.

Three of them, and one you cannot move

Drag the first and watch the grip: it reads --ds-radius-field, so a theme that squares its controls squares this one too. The third is disabled and keeps its thumb — a slider with no grip reads as a broken rule rather than as a control that is switched off.

CORNER

12px

RELIEF

0.00

NOT AVAILABLE HERE

HTML

<div class="field" style="grid-column:1/-1">
  <label class="field-label" for="r-corner">CORNER</label>
  <div class="cluster">
    <input class="range" id="r-corner" type="range" min="0" max="24" step="1" value="12" />
    <output class="field-hint" for="r-corner">12px</output>
  </div>
</div>
<div class="field" style="grid-column:1/-1">
  <label class="field-label" for="r-relief">RELIEF</label>
  <div class="cluster">
    <input class="range" id="r-relief" type="range" min="0" max="2" step="0.05" value="0" />
    <output class="field-hint" for="r-relief">0.00</output>
  </div>
</div>
<div class="field" style="grid-column:1/-1">
  <label class="field-label" for="r-off">NOT AVAILABLE HERE</label>
  <div class="cluster">
    <input class="range" id="r-off" type="range" min="0" max="10" value="4" disabled />
    <output class="field-hint" for="r-off">4</output>
  </div>
</div>

Reference

Read from components/range.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.range.cluster.range-out

SETTINGSSet the first on one element; a theme sets the second for all of them.--range-thumb — falls back to --ds-range-thumb--range-out — falls back to --ds-range-out

READS--ds-accent--ds-focus-ring--ds-focus-width--ds-font-display--ds-hairline--ds-hit-min--ds-ink--ds-radius-field--ds-rule--ds-rule-strong--ds-text-ui

Notes

IT WAS THE BOOK'S OWN FOR MONTHS, BEHIND A BAD ARGUMENT

book.css carried a private copy of this and said a range input "is the other control the library cannot supply." Half of that was true of the colour input beside it — the panel a swatch opens belongs to the browser and no stylesheet reaches it — and none of it was ever true here. A range is a track and a thumb, both styleable in every engine.

A design system whose loudest demo is a page of sliders, with no slider in it. Found on the day the theme builder needed to be in two places at once.

WHAT THE TWO ENGINES COST

EVERY RULE IS WRITTEN TWICEan unknown pseudo-element kills the whole selector list

THE GRIP IS CENTRED BY ARITHMETICboth engines align it to the top of the track

THE BOX IS THE TARGET--ds-hit-min tall, so the hairline is not the hit area

That first one is the single duplication in this library nobody may collapse. Written as one rule listing both spellings, Firefox throws the whole thing away and takes the Chromium half with it — so the slider loses its track in the browser that understood it.