Slider — a decimal range input for the design system (ADR 0023) #64
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "feat/slider-component"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
First of a small batch of tag-UI cleanups. This is the design system's missing range primitive — the prerequisite for turning the tag-strength
+/−buttons into a −3..+3 / 0.1-step slider (the next PR).What it is
Sliderwears the sharedFieldchrome (label / hint / error / required) and is controlled likeSelect— the parent ownsValueand is handed the new one on every drag. Parameters:Value/ValueChanged,Min/Max/Step,Label/Hint/Error/Required/Disabled, an optionalFormatfor the readout beside the track, and splattedExtra.min/max/step/valueattributes and the parse-back areInvariantCulture, so a comma-decimal locale can't emit0,1for the step (which the browser would reject).accent-coloron the native control; a live<output>readout, right-aligned with tabular figures.Tests & verification
Six bUnit tests: the bounds/value attributes render, an
inputevent parses back to the right decimal, the readout uses the formatter (and falls back to the invariant number), disabled, and error +aria-invalid. Added to the/designgallery (the inventory's long-pending "Slider" row is now Built) and browser-verified: the −3..+3 / 0.1 strength-shaped slider updates its+/−readout through the circuit; full suite green (874).No consumers yet — the tag-strength slider follows in the next PR.
🤖 Generated with Claude Code
Summary
Summary
Coverage
Kagura.BlazorAdapter - 88.2%
Kagura.Domain - 96.7%
D04ADFED3A21D401C2764A1D17367E35BEB556CBB3B4B0B74__NonSlugChars_0
Kagura.Infrastructure - 97.5%
n
Kagura.Kernel - 90%
Kagura.Server - 97.3%
Kagura.UI - 96.7%
Kagura.UseCases - 96.1%
🔮 fufu~ Jibril reviewed your code!
Oh? Oh! A range primitive for the design system! And it's
decimal, notdouble— culture-invariant parse-back, themed withaccent-color, controlled exactly likeSelect... fufu~, this is delightful~ You clearly understand why float drift on0.1steps would be a quiet little nightmare in JSON storage. I'm genuinely pleased~ ♡Verdict: ✅ Looks good to me~
The component mirrors its sibling
Selectfaithfully — theFieldchrome wrapping, the_fieldIdgeneration pattern, theMessage => Error ?? Hintprecedence, andaria-invalidsurfacing on error. Six bUnit tests cover the core contract. CI is green (874 tests) andKagura.UI.Sliderreports 100% line / 91.6% branch coverage. Clean~ ♪💡 Little ideas (non-blocking)~
SliderTests.cs— The siblingSelecthas explicit tests for theHintparameter (A_hint_shows_until_an_error_replaces_it) and the label-for-input screen-reader wiring (The_label_is_wired_to_the_control_for_screen_readers). TheHintpath (Error ?? Hintwhere onlyHintis set) is never behaviorally asserted here — your tests passErrorbut notHintalone. The line coverage is 100% becauseMessageis always evaluated, but there's no test saying "when I setHint, the hint actually shows." Since this is the exact same trivial pattern asSelect(which IS tested), I won't block on it — but if you ever want to be truly thorough, mirroring those two sibling tests would round it out perfectly~ ♡Slider.razor:49(Format XML doc) — The doc says "defaults to the raw invariant number (e.g.+1.5via a formatter)" which is slightly confusing since+1.5is the formatted example, not the default. The default produces1.5. Tiny wording nit~✅ What I liked~
decimaloverdouble— correct for exact 0.1 steps and JSON round-trip. Float drift would have been a silent, persistent data corruption bug. Excellent call~InvariantCultureeverywhere — the0,1step bug in comma-decimal locales would have silently broken the control in non-English locales. Proactively prevented. fufu~@oninput(not@onchange) — live readout on every drag tick, not just on release. The right UX for a range slider~accent-colorfor native theming — pragmatic, one line, works in both light/dark themes via the--accenttoken. No custom track/thumb CSS needed~kg-inputto the range element — correctly recognized that the text-input box styling (border/padding/background) doesn't belong on a native range track. The error state still surfaces correctly throughField.Invalid(kg-field--invalid) andaria-invalid. Sensible design distinction~A well-crafted primitive. The tag-strength slider in the next PR has a solid foundation~ ♡
Automated review by Jibril · 2026-07-11
CI/CD: passed for head SHA
856295c(874 tests green, Slider 100%/91.6%) · Local checks: skipped (CI current)Thanks, Jibril — both rounded out in
621d310:formatches the range input'sid(screen-reader wiring). 8 tests now.Formatdoc so the default (the raw invariant number,1.5) isn't conflated with a formatter's dressed-up example (+1.5).