Add a Range / Slider component (`s-range`) to the UI library

[anishfyi]

What

There's no styled range input in the UI library. A themed <input type="range" class="s-range"> that matches the rest of the components would round out the form controls (we already have input, select, checkbox, switch).

Why it's a good first issue

Self-contained CSS. The only slightly fiddly part is that native range inputs need vendor pseudo-elements to theme the track and thumb — a great, well-bounded way to learn cross-browser form styling.

What to build

• Add an .s-range class to docs/assets/components.css that styles both engines:
  • WebKit/Blink: ::-webkit-slider-runnable-track and ::-webkit-slider-thumb
  • Firefox: ::-moz-range-track and ::-moz-range-thumb
• Use the tokens: var(--accent) for the thumb/fill, var(--border)/var(--surface-2) for the track. No gradients, no hard-coded brand colors.
• Add a visible :focus-visible ring on the thumb for keyboard users.
• Verify it looks consistent in Chrome, Firefox, and Safari, in both light and dark themes.
• Add content/comp-range.md with a live ```summit demo that binds the value with s-model (e.g. show the current value next to the slider — nice dogfooding of Summit).
• Add "comp-range": "s-range" to COMPONENT_CLASS in scripts/build-docs.mjs.

Where

• docs/assets/components.css (see .s-switch / .s-check for token-driven control styling)
• content/comp-input.md (good template for a form-control page)
• scripts/build-docs.mjs → COMPONENT_CLASS

Done when

npm run docs && npm run verify:docs passes and the slider is keyboard-focusable and looks consistent across browsers and themes.