Slider
Spec
A value from a range, dragged or moved with the arrow keys (the suggested target's "How much lower", issue 121). The browser's own range input in the app's colors.
Rules
- The label above at the left (field label style) and the value at the right ("10%").
- The track and thumb take accent-color surface-accent; the input is at least 44px tall, so the thumb is easy to reach with a finger.
- Arrow keys move one step; Home and End go to the ends. Screen readers hear the value in words ("10% lower, $243.00 a month") through aria-valuetext.
- Focus: the standard 2px border-focus ring.
- What it changes updates as it moves: the amounts and the button's label.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 15 2026: First version: the browser's range input in the app's colors, label and value above, sized for a finger. (#121)