Slider
Slider lets people set a value, or a range, by dragging along a track.
Preview
Continuous value selection across a known range. A label, an amount, and a 340 track with one handle on it.
The label hugs left and the amount fills right, so the row runs the full width. The handle is a white circle with a brand dot inside it, lifted off the track by dropShadow/xs. Drag it.
Values
Five variants, each a progress width against the same 340 track.
The middle three put the handle centre on the end of the progress line. The two extremes pull 3 inward, which keeps the overhang equal at both ends. Nothing clips, so the drawn component is 349 wide, not 340. At 0 percent the track is not empty: the line is 1 wide, a real node that rounds to nothing.
Range
A second set with a handle at each end. Eleven of the twenty combinations exist.
Left 0 with Right 0 is the default on both axes and draws a full track, so an empty range looks identical to a complete one the moment you place the component. Four of the eleven variants put a handle 3 off the bound it marks. Both are drawn as the file has them, which is why these are the only sliders on the page you cannot drag.
Properties
Two sets, three axes, and the same three knobs on both.
Value is a five step axis, not a number, so anything between the quarters is an override. There are no states: no pressed, no disabled, no focus. The handle is 16 against the 44 a finger needs, so you add the hit area around a target the file never draws.
Tokens
Five colours and one effect style. The handle is the interesting one.
The handle reads static/static-white-0 rather than a background token, so it stays white on the dark theme instead of turning near black. That is right for a knob on the brand line, and the one place a static colour belongs here. It floats on dropShadow/xs.
Guidelines
Keep the amount on screen. A handle three quarters along says nothing by itself, and the number is the only part of this component that names the value.
Do not turn the label off and leave the track on its own. Without a readout the user is guessing, and a slider nobody can read is decoration.
Reach for it when the direction matters more than the exact number: volume, brightness, a price filter. When the value has to be exact, a stepper or a field beats it. Update the amount live as the handle moves; the number is the feedback. Use the range set for genuine bounds, not two unrelated values sharing a scale.