Slider
Picks a number or a range by dragging a handle — with the keyboard, marks and a vertical layout.
Basic
One handle from 0 to 100 — drag it, click the track or use the arrow keys.
Value: 40
Range
range adds a second handle; the value is [start, end]. minStepsBetweenHandles keeps them apart.
Step
step snaps the value; showSteps puts a dot at every step.
Value: 7
Marks
marks adds labelled marks under the track.
Vertical
orientation="vertical" — Arrow Up raises the value; the height comes from the verticalHeight token.
Animate
animate moves the handle smoothly when you click somewhere on the track.
With input
Paired with tx-input-number on the same model — type an exact value or drag.
States
readonly and disabled.
Form
Inside tx-field with Validators.min — the field names the handle and shows the error.
Design tokens
[dt] changes the slider tokens of one slider.