feat(slider): add Slider component

[nandanmen]

Summary

Adds a Slider component for picking a number, or a range between two numbers, by dragging a thumb along a track. It's built on Base UI's Slider (already bundled at 1.8.0), so value, defaultValue, min, max, step, format, onValueChange, disabled and the rest are passed through.

<Slider label="Volume" defaultValue={40} />
<Slider label="Price range" defaultValue={[25, 75]} />

Props on top of Base UI's

• label: rendered with Slider.Label, so it names the slider and its thumb.
• getAriaLabel: accessible name per thumb, for ranges or sliders without a visible label.
• size: "sm" (24px track) or "base" (32px track), exposed through KUMO_SLIDER_VARIANTS and sliderVariants().

Each thumb's value always shows in a brand badge below the track, and the minimum and maximum always show at either end. The slider is horizontal only, so orientation is not accepted.

Styles

• The track is bg-kumo-recessed with a ring-kumo-line ring. Corners are rounded-lg outside and rounded-md inside at the base size, and rounded-md and rounded at sm. The indicator is a raised bg-kumo-base bar with shadow-sm and a ring, inset 3px from the track border.
• Each thumb has a 2px grip line 7px inside the indicator's edge: at its end for a single value, and at both ends for a range.
• thumbAlignment defaults to "edge", so the grips stay inside the track at the minimum and maximum. Callers can still override it.
• A 2px ring-kumo-focus ring shows on keyboard focus. Dragging uses a grabbing cursor, and disabled sliders are dimmed.
• Values are formatted once via format/locale and applied to the badges, the range labels and the announced value. The badges and range labels are aria-hidden, because each thumb already announces its formatted value.

Slider is generic over its value type, as Base UI's Root is, so onValueChange receives a number for a single value and readonly number[] for a range.

Wiring: component exports, the components/slider entry in vite.config.ts and package.json, the registry category (Input), Base UI props in ADDITIONAL_COMPONENT_PROPS (so they show in the props table), a docs page with eight demos, the sidebar nav and the home grid.

The scaffolder's vite.config.ts injection didn't match the file's current indentation, so I added the entry by hand. The PLOP_INJECT_COMPONENT_ENTRY pattern in plopfile.js still expects 8-space indentation.

Validation

• 8 new Slider unit tests:

  • the label names the thumb
  • ranges render one thumb per value
  • the badges and range labels show, and hide when turned off
  • percent formatting
  • keyboard changes call onValueChange
  • the size variant applies

• The full kumo unit suite passes (1,428 tests).

• tsc --noEmit (kumo and docs), vp lint and vp fmt are clean. The registry regenerates with all Slider props.

• I checked every demo on the docs page locally. The grips sit 6–8px inside the indicator, and nothing overlaps.

• Reviews

• bonk has reviewed the change

• automated review not possible because: requesting human design review first; bonk can run on the PR afterwards.

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows:

• Additional testing not necessary because:

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://nanda-deseng-2163-kumo-docs.design-engineering.workers.dev (commit 4859ed0)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://83ede8fc-kumo-docs.design-engineering.workers.dev	4859ed0	2026-10-05T15:36:11.997Z	Visit the dashboard ↗
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://0880b9fb-kumo-docs.design-engineering.workers.dev	ce6df47	2026-10-02T19:49:12.388Z	Visit the dashboard ↗

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@836

commit: 4859ed0

[github-actions]

Visual contracts

Linux Chromium references exercised by the PR's visual-contracts job.

1 curated contract

truncating text trigger

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

Posted 2 inline findings.

Review notes

• Confirmed the review target is pull request #836 for cloudflare/kumo. I will inspect its existing review state, component conventions, and the complete changed implementation before assessing behavior.
• Verified #836 resolves to head ce6df47b0f3173681339d83046c261793182cf95 against main; it has no existing reviews, so there are no published findings to avoid duplicating. The PR adds one new component and associated exports, registry data, tests, and documentation.
• Inspected the complete Slider implementation, its tests, docs, exports, and registry metadata, along with Kumo’s component conventions and Base UI’s Slider API. I am now checking Base UI’s layout and accessibility behavior against the wrapper’s forced styling and forwarded props.
• Base UI confirms that orientation and thumbAlignment are public Root props. The wrapper forces thumbAlignment="edge" after spreading props, and its fixed horizontal control dimensions make the inherited vertical orientation unusable; neither behavior is covered by the added tests. Dependency tooling is unavailable in this read-only runner, so I could not execute the unit suite.

github run