Slider
A slider is a native <input type="range">. There is no component: the browser already handles arrow keys, Page Up and Down, Home and End, and announces the value. Todae sets accent-color from the slider contract tokens in the todae.base layer, and the browser uses it to tint the thumb and filled track. How much of the control that color reaches differs by browser.
40%
<Label htmlFor="volume">Volume</Label>
<input id="volume" type="range" min={0} max={100} step={5} value={value} onChange={onChange} />
Name it with Label and show the current value as text nearby when the exact number matters. Restyle through slider.fill and slider.ring.focus. A slider with two thumbs for a range is not native and is not part of Todae yet.
When to use
When: Picking a value in a range where the rough position matters more than the exact number, such as volume or zoom.
When not: An exact number → Field.TextInput with type="number". A few named choices → Radio. Showing progress the user does not control → Progress.