Slider
The Slider is now part of CDS. It lets users select one or more values from a defined range by dragging a handle along a track, and is intended for situations where seeing the relative position within a range is more useful than typing a precise number — volume, brightness, price filters, time ranges.
The component supports a single handle, multi-handle, and range-selection patterns out of the box, and ships with three pre-styled schemes (EV, Range, Temperature) so common use cases land with minimal styling work. Anatomy is built around a track, optional value labels, a progress fill, and the thumb itself — every part is theme-aware and uses semantic colour tokens.
Under the hood the slider is backed by a native <input type="range"> whenever possible, which means keyboard navigation (arrows, Home/End, Page Up/Down) and screen-reader semantics (aria-valuemin / aria-valuemax / aria-valuenow) come for free. The Develop and Accessibility tabs cover the cases where a custom div-based slider is unavoidable, plus the ARIA caveats around multi-thumb sliders.
Browse the Slider documentation for the full anatomy, schemes, and accessibility guidance.