Slider
A value or a range picked by dragging along a track, with marks, steps, a tooltip and a vertical orientation.
Anotomy
Structure of the slider and how its internal parts are composed. These are the slider's semantic parts, so they are also what the
classNames and styles objects accept. A range slider has one handle per value. The image shows range with the values 20, 30 and 50.
| Name | Description | |
|---|---|---|
1 | root | The whole slider, with the room the handle needs at each end. vertical turns it on its side. |
2 | rail | The full-length bar behind everything, the range of values you can pick from. |
3 | track | One filled segment. A plain slider has one, from the start to the handle. A range slider has one between each pair of handles. |
4 | tracks | The filled stretch from the first handle to the last, behind the segments. It only renders on a range slider. |
5 | handle | The knob you drag, one per value. It shows the tooltip with the value while you drag it. |
© 2026 AntUIKit . All rights reserved.