Pin the range field's value-in-label display

Welcome 👋

Neo.form.field.Range is a slider. With showResultInLabel: true it writes its current value in front of the label, [40] Volume, and keeps it updated as the slider moves. Small, visible behaviour, and no test. A friendly first spec.

This is a good first issue for Hacktoberfest 2026. It needs Node.js and a clone of this repository: no Docker, no AI setup.

[!IMPORTANT] Reserved for first-time Neo.mjs contributors. The maintainer team will not claim, edit, or implement this issue through 2026-10-31. Comment here to claim it, and ask anything on this issue.

Set up once: follow Set up the engine from a clone, including npm run bundle-browser-deps: without it the unit suite selects zero tests.

Where things live

• Source: src/form/field/Range.mjs. getLabelEl() and getInputEl() return the label's and the input's virtual-DOM nodes.
• New test file: test/playwright/unit/form/field/Range.spec.mjs
• Pattern to copy: test/playwright/unit/form/field/InputWidth.spec.mjs (creating a field in a unit test)
• Tip: Range extends the number field, which needs one main-thread stub while your tests run. Install it in test.beforeAll, only if it is missing, and remove it in test.afterAll, exactly as test/playwright/unit/apps/colors/ViewportController.spec.mjs does in its test.beforeAll: const main = Neo.ns('Neo.main', true); if (!main.DomEvents) { main.DomEvents = {registerDisabledInputChars() {}, unregisterDisabledInputChars() {}}; /* delete it again in afterAll */ }. Do not put it at the top of the file: another spec imports the real DomEvents, and npm run test-unit then stops with Namespace collision in unitTestMode for Neo.main.DomEvents.

What to cover

Done when

• test/playwright/unit/form/field/Range.spec.mjs exists, following the pattern file's setup.
• One test(...) per table row.
• Test-only: if the field disagrees with a row, say so on this issue before changing src/.
• npm run test-unit -- test/playwright/unit/form/field/Range.spec.mjs passes.
• npm run test-unit passes.

Out of scope

tickmarks, the useInputEvent DOM listener, and styling.

While you wait for review

You just pinned one small piece of a multi-threaded application engine: in Neo.mjs your app's code runs inside a web worker, and the main thread only paints. Two things worth ten minutes:

• See the part nobody expects. Run npm run build-themes -- -n -e dev -t all and npm run server-start, open apps/workstation/, and drag a tab out of the browser window. It becomes its own OS window, still running, with the same component instances and the same worker. Benefits: Introduction explains why that is possible.
• Your coding agent can go much further here. The skills this repository's AI maintainers work with are published on npm as neo-agent-skills, and they need no Knowledge Base and no Memory Core. With Claude or GPT beside you, the help wanted issues are within reach after this one.